VUE引入自定义字体


1. 下载自定义字体包(后缀名为.ttf, .otf, .eot等格式)

2. 在项目的assets文件夹下建一个fonts文件夹,把字体包放到fonts文件夹中,然后创建一个fonts.css文件

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

@font-face{
  font-family: '庞门正道标题体';
  src: url("../font/庞门正道标题体.ttf") format('truetype') ;
  font-weight: normal;
  font-style: normal;
}

4. 在app.vue中全局引入fonts.css,或在指定页面引入

<style lang="scss">
  @import './assets/fonts/fonts.css';

  #app {
    font-family: 'PingFang-RE';
    font-weight: 400;
  }
</style>


注意:最好不要在项目中引入自定义字体,因为字体文件通常有几M甚至十几M,加载字体文件会严重拖慢页面加载速度; 当然,可以只提取页面中指定文字的字体,以极大的减少字体文件体积,但过程略微繁琐;详见如下资料:

https://www.jianshu.com/p/fc95d07ccb8e

https://zhuanlan.zhihu.com/p/395591436

举报

© 著作权归作者所有


0