vue中使用外部字体

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_44781409/article/details/99311501

有时候为了个性化，可能需要为部分字体添加特殊的font-family
1.在static文件夹中创建font文件夹将字体文件放入

2. 在font文件中新建font.css

css内容如下：

@font-face {  
    font-family: 'SourceHanSans';   //自定义文字名
    src: url('./SourceHanSansCN-Normal.otf');  //路径引入文字
    font-weight: normal;  
    font-style: normal;  
  }

3.在main.js中全局引入

import './font.css'  //路径引入

4.项目中直接使用

font-family:SourceHanSans;