Vue使用外部字体 font

1. 下载字体文件

建议使用.woff 类型字体

字体格式转换工具: https://transfonter.org/
字体加载失败经验贴: https://blog.csdn.net/Youweretrouble/article/details/129451853

2. 将字体文件导入项目中

看自己的需求放置

例如: assets > fonts 目录下

3. 新建fonts.css文件

在assets > fonts 目录下,新建fonts.css文件, 并引入想要的字体

 /* 这是fonts.css 可以设置多种字体
    注意：font-family: 'XXX'; 将字体名字自定义为XXX,使用时要用这个名字
 */
@font-face {
  font-family: 'pingfang-s';
  src: url('./PingFang-SC-Semibold.woff') format('woff'), url('./PingFang-SC-Semibold.woff2') format('woff2');
}
 
@font-face {
  font-family: 'pingfang-r';
  src: url('./PingFang-Regular.woff') format('woff'), url('./PingFang-Regular.woff2') format('woff2');;
}

4. 在项目的main.js文件中引入刚写好的css文件，路径记得对应上自己项目中的路径

// main.js中引入外部字体
import './assets/fonts/fonts.css'

5. 直接在vue文件中的样式添加字体样式

.text {
  font-family: pingfang-r; // 这里的pingfang-r是引入时的自定义名字
}