css3 引入字体-vue中引入自定义字体

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

在开发中，我们经常会遇到很多自定义字体的需求，这里简单记录一下css3 引入字体，方便后续查看。

第一步，首先我们从UI或者微软下载需要的字体库到本地，只需要ttf格式的文件； 第二步css3 引入字体，在vue项目中的assets文件夹下新建一个文件夹font，然后将下载本地的ttf格式文件添加进去；

p1.png

第三步，在字体文件下新建一个font.css文件，并添加上面的代码：

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

第四步，直接在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;
}