Vue自定义字体样式

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

Vue自定义字体样式

duyanke888   2022-09-29 我要评论

Vue使用自定义字体样式

步骤一

拿到自定义字体包

首先要得到自定义字体包(后缀名为.ttf, .otf, .eot等格式的字体包),可自行下载也可以问UI要字体包。

步骤二

在项目文件夹中进行放置自定义字体包的配置

在项目assets文件夹下新建font文件夹,将拿到的字体包放在font文件夹中;

新建一个font.css文件

步骤三

font.css文件配置

在font.css文件中定义所用字体

@font-face {
    font-family: 'ZI DING YI'; /* 重命名字体名 */
    src: url('ZI DING YI.TTF');
    font-weight: normal;
    font-style: normal;
}

步骤四

在app.vue中引入font.css

<style lang="scss">
  @import './assets/font/font.css';
  #app {
    font-family: 'PingFang-RE';
    font-weight: 400;
  }
</style>

全局自定义字体,提高项目字体美化

我们在项目开发时.或多或少 会给项目 添加全局字体;

添加字体的最佳方案,请看

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们