font-family背景 h5项目里可以看到这样一句代码这句话的意思是；如果系统支持苹方字体，则使用苹方字体（苹果方

背景

h5项目里可以看到这样一句代码

font-family: PingFangSC-Regular, sans-serif;

这句话的意思是；如果系统支持苹方字体，则使用苹方字体（苹果方体，苹方字体只有ios才有）。如果是系统无法使用苹方字体无法使用则降级使用sans-serif（无衬线字体），是一类字体。使用android设置过的字体。

字体分类

字体分类（类似风格）	举例
衬线体	宋体（SimSun）、新罗马（Times New Roman）
无衬线体	微软雅黑（Microsoft Yahei）、黑体-简（Heiti SC）、Tahoma等

自定义字体

@font-face {
  font-family: 'MYfin';
  src: url('') format('truetype');
  font-weight: normal;
  font-style: normal;
}

（1）引入一个完整的字体库，体积太大，把你需要的字体抽离出来，生成字体库。一个抽离字体工具-font-spider(字蛛)。zhuanlan.zhihu.com/p/335738698
（2）将文件放到cdn上，异步加载，app.vue中引入就行。
（3）在浏览器上ttf格式存在兼容问题，建议在浏览器使用woff格式。

为什么设置字体时后面一定有sans-serif

它在操作系统或者浏览器里是可以设置的，你可以把它设置成宋体，也可以设置成微软雅黑，而设置的这种字体肯定是当前系统里存在的字体，所以使用这个字体就一肯能显示出来，所以加上sans-serif就能保证调用。