font-family的一点总结和思考
本文的目的是总结出一个通用的，在不同操作系统的不同浏览器下，都能达到较好展示效果的font-family写法，直接上结论：
body {
font-family``: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue"``, "Segoe UI"``, Helvetica``, Arial``, "PingFang SC"``, "Microsoft YaHei"``, "WenQuanYi Micro Hei"``, sans-serif``;
}
为什么是这个顺序
font-family的回落机制，是指font-family可以把多个字体名称作为一个”回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。
所以首先我们使用system-ui，让系统为我们选择最佳字体，也就是system-ui和它的兼容性写法：-apple-system 和 BlinkMacSystemFont 。
然后选择英文字体，这是因为绝大部分中文字体里都包含英文字母和数字，不进行英文字体声明是没有问题的，但是大多数中文字体中的英文和数字的部分都不是特别漂亮，所以建议也对英文字体进行声明。由于英文字体中大多不包含中文，我们可以先进行英文字体的声明，这样不会影响到中文字体的选择，因此优先使用最优秀的英文字体："Helvetica Neue", "Segoe UI", Helvetica, Arial 。
然后选择中文字体："PingFang SC", "Microsoft YaHei", "WenQuanYi Micro Hei"。
最后选择sans-serif作为保底，最起码要是一种无衬线的字体。
system-ui
简单而言，font-family: system-ui 的目的就是在不同的操作系统的 Web 页面下，自动选择本操作系统下的字体。
默认使用特定操作系统的系统字体可以提高性能，因为浏览器或者 webview 不必去下载任何字体文件，而是使用已有的字体文件。 font-family: system-ui 字体设置的优势之处在于它与当前操作系统使用的字体相匹配，对于文本内容而言，它可以得到最恰当的展示。
从 caniuse.com 查看 system-ui 的兼容性（2021.5）：
可以看到 font-family: system-ui 仅在个平台的 Chrome 56+得到了支持，在 macOS 的 Chrome 53-55 下，需要使用 font-family: BlinkMacSystemFont，在 macOS/iOS 的其他浏览器下，需要使用font-family: -apple-system。
所以，想要使用system-ui，兼容性最好的写法为：
body {
font-family``: system-ui, -apple-system, BlinkMacSystemFont;
}
实际渲染的字体
在支持 font-family: system-ui 的浏览器中，实际渲染的字体如下：
Windows
Microsoft YaHei UI （微软雅黑的改良版本）
MacOS
西文：
San Francisco Fonts
中文：
PingFang SC
介绍一下这里实际渲染的几种字体：
Microsoft YaHei / Microsoft YaHei UI
Microsoft YaHei 是微软从 Vista 开始微软提供的中文字体，拥有 Regular、Bold 两种粗细的字重，从 win8 后又提供了 Light 这种字重。这是一款无衬线的黑体类字体，显著提高了字体的显示效果。现在这款字体已经成为 windows 浏览器最值得使用的中文字体。
Microsoft YaHei UI 是 Microsoft YaHei 的改良版，依然可以当做界面UI所使用的字体，它在微软雅黑体的基础上做出了改良，集成了微软雅黑体的优点，在中文方面没有什么变化，主要是在124578数字和一些字母上的变化较大。下方图片为两种字体的对比图，上方为Microsoft YaHei UI，下方为Microsoft YaHei：
可以看到，Microsoft YaHei UI 的无衬线更彻底一些，修改了一些弧度，其他基本上是完全一致的，这两种字体每年都会更新，也越来越趋近于相同，基本上可以视为同一种字体。
值得一提的是，win10的电脑中，如果不安装office或者主动安装Microsoft YaHei 字体，那么系统字体中其实只有Microsoft YaHei UI 字体，此时无论是声明 font-family: Microsoft YaHei; 还是声明 font-family: Microsoft YaHei UI，其实都使用了系统中的Microsoft YaHei UI 字体，此时上文提到的两种字体的差异就完全不存在了。如下图，只有一种字体：
San Francisco Fonts
San Francisco Fonts 又叫旧金山字体，是一款西文字体。随着 iOS 9 更新面世，在 WatchOS 中随 Apple Watch 一起悄然发售，并且还将在 Apple TV 上的新 tvOS 中使用。
San Francisco Fonts 在 iOS 系统上用于替代升级另外一款西文字体 Helvetica Neue。Apple 做了一些重要的改变，使其成为平台上更好的， 甚至是完美的西文字体。
下图是San Francisco Fonts 和PingFang SC 的对比（上San Francisco Fonts， 下PingFang SC ）：
San Francisco Fonts作为 Mac 和 iOS 上的系统字体，默认（没有主动安装过该字体）是无法被font-family显式声明的，当我们使用 system-ui 时，可以看到实际渲染的字体信息为：
这种字体其实就是San Francisco Fonts，我们可以通过命令 open /System/Library/Fonts 打开字体库：
选中的字体就是San Francisco Fonts字体族。
但是当我们使用 font-family: San Francisco; font-family: San Francisco Fonts; font-family: '.SF NS'; font-family: 'SFNS'; 等各种形式尝试声明该字体，就会发现这些声明并没有效果，也就是说，如果我们想使用San Francisco Fonts字体，只能使用system ui的形式声明。
PingFang SC
苹果推出的最新字体，显示效果最好，但只有较新的系统才支持。
可以看到system-ui实际渲染的字体都是浏览器可以渲染的最好的字体。
英文字体
"Helvetica Neue", "Segoe UI", Helvetica, Arial
首先介绍一下上边没有提到的字体：
Helvetica Neue / Helvetica
Helvetica Neue / Helvetica是一种被广泛使用的传奇般的西文字体，是苹果生态中最常用的西文字体。其中 Helvetica Neue 是 Helvetica 的改善版，增加了更多不同粗细与宽度的字形。
Segoe UI
Segoe UI 是 Windows 从 Vista 开始的默认西文字体族，只有西文，不支持汉字，属于无衬线体。
它也表示一个系列而不是某一款单一字体。使用 font-family: Segoe UI 可以在 Windows 平台及 Windows Phone 上选取最佳的西文字体展示。
Arial
Windows早期默认的无衬线西文字体，主要用于低版本浏览器的降级方案。
英文字体排序思路为：
Helvetica Neue：首先保证苹果平台的显示，使用了苹果生态中最常用的西文字体Helvetica Neue，没有选择San Francisco Fonts的原因是支持San Francisco Fonts的浏览器均支持system-ui，所以不需要重复声明。
Segoe UI： Windows 平台的最佳西文展示。
Helvetica, Arial：针对一些低版本浏览器的降级方案。
中文字体
"PingFang SC", "Microsoft YaHei", "WenQuanYi Micro Hei"
中文字体排序思路为：
PingFang SC：首先保证苹果平台的显示。
Microsoft YaHei：如果不是苹果平台，那么尽量使用微软平台的最佳字体Microsoft YaHei，保持显示效果的一致性。
WenQuanYi Micro Hei：文泉驿微米黑，Linux 社区现有的最佳简体中文字体，在Linux平台没有微软雅黑字体时使用。
衬线字体与无衬线字体
衬线字体（serif）
衬线字体，意思是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同，它容易识别，强调了每个字母笔画的开始和结束，因此易读性比较高。常见的衬线字体如下：
宋体（SimSun）
Windows 下大部分浏览器的默认中文字体，是为适应印刷术而出现的一种汉字字体。笔画有粗细变化，是一种衬线字体，宋体在小字号下的显示效果还可以接受，但是字号一大体验就很差了，所以使用的时候要注意，不建议做标题字体使用。
Times New Roman
Mac 平台 Safari 下默认的英文字体，是最常见且广为人知的西文衬线字体之一，众多网页浏览器和文字处理软件都是用它作为默认字体。
无衬线字体（sans-serif）
无衬线字体与衬线字体相反，没有额外的装饰，而且笔画的粗细差不多，该类字体通常是机械的和统一线条的，它们往往拥有相同的曲率，笔直的线条，锐利的转角。常见的无衬线字体如下：
微软雅黑（Microsoft Yahei）
微软从windows Vista 开始提供的字体，这是一款无衬线的黑体类字体，显著提高了字体的显示效果。现在这款字体已经成为 windows 浏览器最值得使用的中文字体。
Arial
Windows 平台上默认的无衬线西文字体。
附录
font-family 关键字
对于CSS中的font-family来说，取值可以分为两类：
- 具体字体族名，比如说 font-family: Arial ，这就是定义了一个具体的字体样式，字体族名为Arial。
- 通用字体族名，系统会从该通用字体族中挑出可用并且较好的字体作为呈现，比如 font-family: sans-serif，系统可能会在"Open Sans", "Arial" "微软雅黑"中挑选一种作为最终的字体。通用字体族名一般是作为备选机制，当指定的字体不可用时，回落到通用字体族。
通用字体族名在CSS Fonts Module Level 3 (w3.org)中定义了五个：
- serif 衬线字体族
- sans-serif 非衬线字体族
- monospace 等宽字体，即字体中每个字宽度相同
- cursive 草书字体
- fantasy 主要是那些具有特殊艺术效果的字体
后来在CSS Fonts Module Level 4 (w3.org)新增了四个：
- system-ui 系统默认字体
- emoji 用于兼容 emoji 表情符号字符
- math 适用于数学表达式
- fangsong 此字体系列用于中文的（仿宋）字体。
如何查看浏览器真实渲染的字体
Chrome F12 进入开发者工具，使用元素选择工具选中某个HTML元素：
切换到Computed栏：
滑动到最下方，找到Rendered Fonts：
就可以看到当前元素实际渲染的字体了。
为什么没有提到安卓？
在网上查到的关于安卓浏览器字体选择的文章，说法不一，所以最后采用了一种相对靠谱的说法，说安卓浏览器的中文显示为思源黑体，西文显示为Roboto，并且这两种字体都不需要声明，直接回落到无衬线字体族，系统就会自动选择这两种字体。
转载自:https://juejin.cn/post/7195823084887719991