vue中引入自定义字体

在开发中，经常会遇到许多自定义字体的需求，这里简单记录下，以便后续查看。

第一步，首先，我们将需要的字体库从UI或者谷歌下载到本地，只需要ttf格式的文件即可；

第二步，在vue项目中assets文件夹下新建一个文件夹font,然后将下载到本地的ttf格式的文件放进去；

p1.png

第三步，在font文件下新建一个font.css文件，里面补充这些代码：

//font.css
@font-face {
  font-family: 'MYFONT';
  src: url('FZZDXJW.ttf');
  font-weight: normal;
  font-style: normal;
}

• 上面的MYFONT是你自定义的名字，随便修改。

第四步，在main.js文件里直接引入font.css文件：

//main.js
import '@/assets/font/font.css';

然后，就可以在需要的地方直接使用了：

.title {
    text-align: center;
    margin: 50px auto;
    font-size: 49px;
    color: #fff;
    font-family: MYFONT;
}

• 当然，引入一个字体库势必会增大打包体积，如果在项目中并没有大量使用自定义字体的情况下，可以考虑适当的切图来处理。