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

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

PS：

文件目录图.png