vue项目中使用自定义字体(font-family)

为了能让字体在网页中展示出美观,一些默认字体并不能满足需求的,so只能使用自定义字体
下面讲解怎么能在vue项目中使用自定义的字体(看完你会觉得so easy _

第一步:

首先要得到自定义字体包(后缀名为.ttf, .otf, .eot等格式的字体包),可自行下载也可以问UI小姐姐要字体包,拿到字体包后进入项目中在assets文件夹下建一个font文件夹

第二步:

把拿到的字体包放到font文件夹中接着创建一个font.css文件

第三步:

在font.css文件中定义你所用的字体(这里以PingFang为例)
font.css文件:

@font-face {
    font-family: 'PingFang-RE'; /* 重命名字体名 */
    src: url('PINGFANG REGULAR.TTF');
    font-weight: normal;
    font-style: normal;
}

第四步:

在app.vue中引入font.css


PS:


vue项目中使用自定义字体(font-family)_第1张图片
文件目录图.png

你可能感兴趣的:(vue项目中使用自定义字体(font-family))