Web 字体 font-family 再探秘

以前写过一篇关于Web字体简介及使用技巧的文章：

• 你该知道的字体 font-family。

该篇文章基本没有太多移动端的字体选择及分析。而且过了这么久，现在的 Web 字体又有了一些新的东西，遂有此文。

正文从这里开始。

各大网站最新 font-family

做为前端的一个习惯，浏览各个网站的时候老是喜欢打开开发者工具时不时审查元素一下。看了一下一些比较出名的网站移动端的 font-family：

• 天猫：font-family: "PingFang SC",miui,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,sans-serif;
• Github：font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
• CSS-Tricks：font-family: system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;

颇有意思的是，相似 system-ui，-apple-system，BlinkMacSystemFont 等等早几年在 font-family 中几乎见不到的字体定义现在已经很广泛了。它们是什么呢？是一种特定的字体吗？

字体基础知识

在继续以前，咱们先简单回顾关于字体的一些基础知识。

衬线字体与无衬线字体

就 Web 经常使用的一些字体而言，其实大致上分为衬线字体和无衬线字体。

衬线字体 -- 关键字为 serif，意为有衬线的字体，衬线的意思是在字符笔画末端有叫作衬线的小细节的额外装饰，并且笔画的粗细会有所不一样，这些细节在大写字母中特别明显。

无衬线字体 -- 关键字为 sans-serif，也就是无衬线的意思。专指西文中没有衬线的字体，与汉字字体中的黑体相对应。与衬线字体相反，该类字体一般是机械的和统一线条的，它们每每拥有相同的曲率，笔直的线条，锐利的转角。

中文下，无衬线字体就是黑体，黑体字也就是又称方体或等线体，没有衬线装饰，字形端庄，笔画横平竖直，笔迹所有同样粗细。

关于字体的基础知识，建议先看看这篇 你该知道的字体 font-family

font-family 关键字

对于 CSS 中的 font-family 而言，它有两类取值。

1. 一类是相似这样的具体的字体族名定义：font-family: Arial 这里定义了一个具体的字体样式，字体族名为 Arial;

2. 一类是通用字体族名，它是一种备选机制，用于在指定的字体不可用时给出较好的字体，相似这样：font-family: sans-serif 。

其中，sans-serif 表无衬线字体族，例如， "Open Sans", "Arial" "微软雅黑" 等等。

关于通用字体族名，在 CSS Fonts Module Level 3 -- Basic Font Properties 中，定义了 5 个，也就是咱们熟知的几个通用字体族名：

1. serif 衬线字体族
2. sans-serif 非衬线字体族
3. monospace 等宽字体，即字体中每一个字宽度相同
4. cursive 草书字体
5. fantasy 主要是那些具备特殊艺术效果的字体

新增通用字体族关键字

而在 CSS Fonts Module Level 4 -- Generic font families 中，新增了几个关键字：

• system-ui 系统默认字体
• emoji 用于兼容 emoji 表情符号字符
• math 适用于数学表达式
• fangsong 此字体系列用于中文的（仿宋）字体。

咱们看看用的最多的 system-ui。

system-ui

简单而言，font-family: system-ui 的目的就是在不一样的操做系统的 Web 页面下，自动选择本操做系统下的默认系统字体。

默认使用特定操做系统的系统字体能够提升性能，由于浏览器或者 webview 没必要去下载任何字体文件，而是使用已有的字体文件。 font-family: system-ui 字体设置的优点之处在于它与当前操做系统使用的字体相匹配，对于文本内容而言，它能够获得最恰当的展现。

San Francisco Fonts

OK，简单了解了 system-ui 字体族。可是像 -apple-system、BlinkMacSystemFont 没有在最新的标准里出现。它们又表明什么意思呢？

在此以前，先了解下 San Francisco Fonts 。

San Francisco Fonts 又叫旧金山字体，是一款西文字体。随着 iOS 9 更新面世，在 WatchOS 中随 Apple Watch 一块儿悄然发售，而且还将在 Apple TV 上的新 tvOS 中使用。

San Francisco Fonts 在 iOS 系统上用于替代升级另一款西文字体 Helvetica Neue。Apple 作了一些重要的改变，使其成为平台上更好的， 甚至是完美的西文字体。

-apple-system/BlinkMacSystemFont

话说回来。正如每一个前端开发人员都知道的那样，将一个功能归入规范是一回事，将其归入浏览器又是另外一回事。

幸运的是，system-ui 的普及很快。 Chrome 和 Safari 均可以在各类平台上彻底支持它。只有 Mozilla 和 Windows 相对落后。

看看 system-ui 的兼容性，Can i Use -- system-ui(图片截取日 2019-08-13)：

仔细看上图的最后两行：

• Supported as the -apple-system value (only on macOS and iOS)
• Supported as the BlinkMacSystemFont value (only on macOS)

考虑到不一样平台及向后兼容，在 macOS 和 iOS 上，咱们须要使用 -apple-system 及 BlinkMacSystemFont 来兼容适配 system-ui 标准。

Segoe UI

Segoe UI 是 Windows 从 Vista 开始的默认西文字体族，只有西文，不支持汉字，属于无衬线体。

它也表示一个系列而不是某一款单一字体。使用 font-family: Segoe UI 能够在 Windows 平台及 Windows Phone 上选取最佳的西文字体展现。

Roboto

Roboto 是为 Android 操做系统设计的一个无衬线字体家族。Google 描述该字体为“现代的、但平易近人”和“有感情”的。

这个字体家族包含Thin、Light、Regular、Medium、Bold、Black六种粗细及相配的斜体。

总结一下

到此，咱们能够总结一下了。以 CSS-Tricks 网站的 font-family 定义为例子：

{
  font-family: 
    system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,
    Helvetica,Arial,
    sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
}
复制代码

1. system-ui，使用各个支持平台上的默认系统字体
2. -apple-system， 在一些稍低版本 Mac OS X 和 iOS 上，它针对旧版上的 Neue Helvetica 和 Lucida Grande 字体，升级使用更为合适的 San Francisco Fonts
3. BlinkMacSystemFont，针对一些 Mac OS X 上的 Chrome 浏览器，使用系统默认字体
4. segoe ui，在 Windows 及 Windows Phone 上选取系统默认字体
5. Roboto，面向 Android 和一些新版的的 Chrome OS
6. Helvetica,Arial，在针对不一样操做系统不一样平台设定采用默认系统字体后，针对一些低版本浏览器的降级方案
7. sans-serif，兜底方案，保证字体风格统一，至少也得是无衬线字体

上述 5 个字体族定义，优先级由高到底，能够看到，它们 5 个都并不是某个特定字体，基本的核心思想都是选择对应平台上的默认系统字体。

涵盖了 iOS、MAC OS X、Android、Windows、Windows Phone 基本全部用户常用的主流操做系统。

使用系统默认字体的主要缘由是性能。字体一般是网站上加载的最大/最重的资源之一。若是咱们可使用用户机器上已有的字体，咱们就彻底不须要再去获取字体资源，从而使加载时间明显加快。

而且系统字体的优势在于它与当前操做系统使用的相匹配，所以它的文本展现必然也是一个让人温馨展现效果。

固然，上述 font-family 的定义不必定是最佳的。譬如天猫在最前面添加了 "PingFang SC",miui,..一定也有他们的业务上的考虑。可是一些 fallback 方案向后兼容的思想都是一致的，值得参考学习。

最后

还有一些对字体细节深刻讨论的，感兴趣的能够看看下面几篇文章：

• Using UI System Fonts In Web Design: A Quick Practical Guide
• System Fonts in CSS
• Apple’s San Francisco Font

好了，本文到此结束，但愿对你有帮助 :)

更多精彩 CSS 技术文章汇总在个人 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

若是还有什么疑问或者建议，能够多多交流，原创文章，文笔有限，才疏学浅，文中如有不正之处，万望告知。