font-family中的sans-serif字体

参考文章：font-family 定义的最后为什么要加一句sans-serif? (opens new window)

Sans-serif

Sans-serif是专指西文中没有衬线的字体，与汉字字体中的黑体相对应。与衬线字体相反。该类字体通常是机械的和统一线条的，它们往往拥有相同的曲率，笔直的线条，锐利的转角。

sans-serif 英[ˌsæn ˈserɪf]

来自 百度百科 (opens new window)

背景

开发中习惯从UI的设计图把样式中直接拷贝过来，里面的font-family如下：

span {
  font-family: PingFangSC-Medium, PingFang SC;
}

由于项目中配置了stylelint，出现如下报错：意外的缺少通用字体

Unexpected missing generic font family   font-family-no-missing-generic-family-keyword

然后通过网上搜发现：只要在font-family最后加上sans-serif字体即可

span {
  font-family: PingFangSC-Medium, PingFang SC,sans-serif
}

定义font-family时,最好在最后加一个sans-serif,这样如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;

还在一个地方看到这样的话,也是这个问题:

--W3C建议字体定义的时候，最后以一个类别的字体结束，例如sans-serif，以保证在不同操作系统下，网页字体都能被显示。

1. 为什么sans-serif就能保证调用?
2. 什么是种类族科?又为什么以能保证在不同操作系统下，网页字体都能被显示?

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

• sans-serif就是无衬线字体，是一种通用字体族。

  常见的无衬线字体有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圆、隶书等等。

  font-family最后加上sans-serif，也是为了保证能够调用这个字体族里面的字体，因为大多数计算机里都有这种字体。