一、字体家族font-family主要分为衬线字体和无衬线字体。
web常用的字体类型：
serif(衬线)
sans-serif(无衬线)
monospace(等宽)
fantasy(梦幻)
cuisive(草体)
serif(衬线)
serif，意为有衬线的字体，衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰，而且笔画的粗细会有所不同，这些细节在大写字母中特别明显。属于衬线的字体有宋体、Times New Roman（Mac 平台 Safari 下默认的英文字体，是最常见且广为人知的西文衬线字体之一，众多网页浏览器和文字处理软件都是用它作为默认字体。）
sans-serif -- 无衬线字体
sans-serif 也就是无衬线的意思。专指西文中没有衬线的字体，与汉字字体中的黑体相对应。与衬线字体相反，该类字体通常是机械的和统一线条的，它们往往拥有相同的曲率，笔直的线条，锐利的转角。
中文下，无衬线字体就是黑体，黑体字也就是又称方体或等线体，没有衬线装饰，字形端庄，笔画横平竖直，笔迹全部一样粗细。
属于无衬线的字体有微软雅黑（Microsoft Yahei）、华文黑体（STHeiti）、华文细黑（STXihei）、黑体-简（Heiti SC）、冬青黑体（Hiragino Sans GB）、Helvetica | Helvetica Neue(被广泛用于全世界使用拉丁字母和西里尔字母的国家。Helvetica 是苹果电脑的默认字体，微软常用的Arial 字体也来自于它)、Arial（Windows 平台上默认的无衬线西文字体，有多种变体，比例及字重（weight）和 Helvetica 极为相近）、Verdana（无衬线字体，优点在于它在小字上仍结构清晰端整、阅读辨识容易）、Tahoma（字体结构和 Verdana 很相似，对 Unicode 字集的支持范围较大，可以替代Arial 字体）
monospace -- 等宽字体
等宽字体是指字符宽度相同的电脑字体，常见于 IDE 或者编辑器中，每个字母的宽度相等，通常用于计算机相关书籍中排版代码块。
fantasy 、cuisive
fantasy和 cuisive 字体在浏览器中不常用，在各个浏览器中有明显的差异。
注：在浏览器中定义字体库时要注意几点要求
比如我们要用宋体时，font-family:"宋体"，这样写可能会出现因为字符编码问题而出现问题，有两种方法
用英文来写，eg:font-family:"SimSun"
转化为unicode 编码，eg:font-family:"\5b8b\4f53"，各个字体都有自己的编码
在写多个字体类型时加单双引号，eg:font-family:"SimSun","sans-serif"
写字体类型时要注意兼容问题，系统兼容和中西文字的兼容，
西文在前，中文在后，eg:font-family:"\5b8b\4f53"，
要兼顾各个操作系统，系统中安装的字体不一样，eg:MAC OS 下的很多中文字体在 Windows 都没有预装，为了保证 MAC 用户的体验，在定义中文字体的时候，先定义 MAC 用户的中文字体，再定义 Windows 用户的中文字体。其次很多人都不知道 Android 下没有预装微软雅黑和宋体，那么 Android 机型下的中文字体设置又是很考究的。
要兼顾旧操作系统，就像你写的页面要兼容IE的低版本一样，在使用新字体时要考虑没有安装新字体，考虑向下兼容。
二、网页字体 font-family 属性详解
当我们拿到设计稿去实现一个网页时，经常会发现设计稿当中一般使用的字体都是 PingFang SC 这一款字体。这是因为我们的 UI 设计师 一般使用的都是 Mac 电脑制作的设计稿。但是我们并不能傻乎乎的就按照设计稿直接设置 font-family:PingFang SC;
因为在 Windows 系统下并没有苹方字体可以使用。所以我们需要灵活地去设置网页的字体家族，在不同的系统下，不同的设备下，使用合适的字体，并且兼顾到中英文。并不是设计稿是什么字体，就必须设置为这款字体。
一般我们都会为 body 标签，指定 font-family 属性，为整个网页设置统一的字体，而且尽可能的使用各个系统下的默认字体。
各大网站最新的 font-family
小米：Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
京东：Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
天猫：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;
其中 system-ui，-apple-system，BlinkMacSystemFont ，Segoe UI ，Helvetica ，Arial 是在指定使用各个系统下默认的西文字体。
其中 "PingFang SC" ,Microsoft Yahei 指定各个系统下默认的中文字体。
其中 Hiragino Sans GB ,Heiti SC ,WenQuanYi Micro Hei 指定一些常见的中文字体。
font-family
对于 CSS 的 font-family 而言，设置时，它有两类取值。
1、一类是类似这样的具体的字体族名定义：font-family: Arial 这里定义了一个具体的字体样式，字体族名为 Arial;
关于字体族名，有很多种：
Helvetica
Arial
PingFang SC
Microsoft Yahei
Hiragino Sans GB
...
2、一类是通用字体族名，它表示一大类字体（并非单个），类似这样：font-family: sans-serif 。
关于通用字体族名，有5种：
serif衬线字体族
sans-serif 非衬线字体族
monospace等宽字体，即字体中每个字宽度相同
cursive 草书字体
fantasy 主要是那些具有特殊艺术效果的字体
衬线体和无衬线字体
就 Web 常用的一些字体而言，其实大体上分为衬线字体和无衬线字体。
衬线字体 -- 关键字为 serif，意为有衬线的字体，衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰。
无衬线字体-- 关键字为sans-serif，也就是无衬线的意思。专指西文中没有衬线的字体，与汉字字体中的黑体相对应。与衬线字体相反，该类字体通常是没有衬线装饰，字形端庄，笔画横平竖直。
对比着来看：
中文字体界，两个有代表性的分类——宋体和黑体，分别对应着衬线字体和无衬线字体。
因为无衬线的字体结构简单，在同等字号下，无衬线的字体看上去要比有衬线的更大，结构也更清晰，所以电子设备的屏幕上也偏好使用无衬线字体。
新增通用字体族关键字
system-ui 系统默认字体
emoji 用于兼容 emoji 表情符号字符
system-ui
简单而言，font-family: system-ui 的目的就是在不同的操作系统的 Web 页面下，自动选择本操作系统下的默认系统字体。
默认使用特定操作系统的系统字体可以提高性能，因为浏览器或者 webview 不必去下载任何字体文件，而是使用已有的字体文件。font-family: system-ui 字体设置的优势之处在于它与当前操作系统使用的字体相匹配，对于文本内容而言，它可以得到最恰当的展示。
-apple-system/BlinkMacSystemFont
话说回来。正如每个前端开发人员都知道的那样，将一个功能纳入规范是一回事，将其纳入浏览器又是另一回事。
幸运的是，system-ui 的普及很快。Chrome 和 Safari 都可以在各种平台上完全支持它。只有 Mozilla 和 Windows 相对落后。
考虑到不同平台及向后兼容，在 macOS 和 iOS 上，我们需要使用 -apple-system 及 BlinkMacSystemFont 来兼容适配 system-ui 标准。
Segoe UI
Segoe UI 是 Windows 从 Vista 开始的默认西文字体族，只有西文，不支持汉字，属于无衬线体。
它也表示一个系列而不是某一款单一字体。使用 font-family: Segoe UI 可以在 Windows 平台及 Windows Phone 上选取最佳的西文字体展示。
Roboto
Roboto 是为 Android 操作系统设计的一个无衬线字体家族。
网站字体定义推荐写法
以 Git-Hub 网站的 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;
}system-ui，使用各个支持平台上的默认系统字体
-apple-system， 在一些稍低版本 Mac OS X 和 iOS 上，升级使用更为合适的旧金山西文字体
BlinkMacSystemFont，针对一些 Mac OS X 上的 Chrome 浏览器，使用系统默认字体
segoe ui，在 Windows 及 Windows Phone 上选取系统默认字体
Roboto，面向 Android 和一些新版的的 Chrome OS
Helvetica,Arial，在针对不同操作系统不同平台设定采用默认系统字体后，针对一些低版本浏览器的降级方案
sans-serif，兜底方案，保证字体风格统一，至少也得是无衬线字体
上述 5 个字体族定义，优先级由高到底，可以看到，它们 5 个都并非某个特定字体，基本的核心思想都是选择对应平台上的默认系统字体。
使用系统默认字体的主要原因是性能。字体通常是网站上加载的最大/最重的资源之一。如果我们可以使用用户机器上已有的字体，我们就完全不需要再去获取字体资源，从而使加载时间明显加快。
并且系统字体的优点在于它与当前操作系统使用的相匹配，因此它的文本展示必然也是一个让人舒适展示效果。
中文字体设置
当然国内网站还要考虑到中文字体，因为上述 Git-Hub 是一个外文网站，所以没有中文字体的需求。
"PingFang SC" 苹果默认的中文字体
Microsoft Yahei windows默认的中文字体
Heiti SC 黑体
WenQuanYi Micro Hei 黑体，类似的还有冬青黑体Hiragino Sans GB
"\5B8B\4F53" 宋体，也可以直接写成 宋体
字体设置建议
1、尽量使用系统默认字体
2、兼顾中西，西文在前，中文在后
中文或者西文（英文）都要考虑到。由于大部分中文字体也是带有英文部分的，但是英文部分又不怎么好看，但是英文字体中大多不包含中文。通常会先进行英文字体的声明，选择最优的英文字体，这样不会影响到中文字体的选择，中文字体声明则紧随其次。
3、兼顾多操作系统
选择字体的时候要考虑多操作系统。例如 MAC OS 下的很多中文字体在 Windows 都没有预装，为了保证 MAC 用户的体验，在定义中文字体的时候，先定义 MAC 用户的中文字体，再定义 Windows 用户的中文字体。
4、以字体族系列 serif 和 sans-serif 结尾
本文转自：
博客园：https://www.cnblogs.com/white-bull/p/7994660.html
知乎，https://zhuanlan.zhihu.com/p/544935556
感谢原作者！