vue移动端项目使用自定义字体

手机只会显示系统自带的默认字体，如果要展示特殊字体只能引入字体包，但是引入的字体包如果是中文汉字类（比如楷体、黑体等）加载速度会很慢，因为毕竟汉字有很多。

使用自定义字体

1. 引入所需的字体报，可以到git上找需要的字体包，但是貌似不是那么好找～～。
2. 新建一个css文件，在里面引入所需的字体包（src），然后定义好该字体的名字（font-family）。

@font-face { 
  font-family: 'Arial'; /*这里是说明调用来的字体名字*/ 
  src: url('./Arial.ttf'); /*这里是字体文件路径*/ 
}

@font-face { 
  font-family: 'Calibri'; 
  src: url('./Calibri.ttf');
}

@font-face { 
  font-family: '楷体'; 
  src: url('./Kaiti.ttf'); 
}

@font-face { 
  font-family: '黑体-简'; 
  src: url('./SimHei.ttf');  
}

@font-face { 
  font-family: '华文仿宋';
  src: url('./STFangsong.ttf');  
}

3. 在main.js中全局引入

import './assets/fonts/font.css'

4. 在需要使用特殊字体的地方使用即可