vue设置特定页面中使用自定义字体的实现方式

某些场景下，需要使用自定义的字体，例如类似计算器的显示效果，还有用户的手机使用了卡通字体的效果，但是希望我们的应用还是需要显示传统的字体。

实现方式：

• 准备好自定义字体包（后缀名为.ttf, .otf, .eot等格式的字体包），进入项目中在assets文件夹下建一个font文件夹，把字体文件放进去
• 把拿到的字体包放到font文件夹中接着创建一个font.css文件，内容如下(以pingfang字体为例)：

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

• 在需要的页面引入

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