在界面设计中经常要处理文字，会面对大量的字体对象。网页中的字体是如何显示的？这个问题和 CSS 中的 font-family 有着紧密的关系。当我们拿到设计稿去实现一个网页时，经常会发现设计稿当中一般使用的字体都是 PingFang SC 这一款字体。这是因为我们的 UI 设计师 一般使用的都是 Mac 电脑制作的设计稿。但是我们并不能傻乎乎的就按照设计稿直接设置 font-family:PingFang SC; 这样的代码。

一般我们都会为 body 标签，指定 font-family 属性，为整个网页设置统一的字体，而且尽可能的使用各个系统下的默认字体。font-family 是前端的一个 CSS 属性，用来定义字体名称，控制网页用什么字体显示。它会根据所填的字体名称查找用户电脑是否有对应的字体，进而让字体显示在网页中。由于 Windows 电脑默认是没有苹方的，所以我们的苹方字体设计稿在 Windows 中就显示微软雅黑。看着简单的文字，其实还可以拆分为更细化的属性，比如字体、大小、颜色、字重、行高、对齐方式等等。在设计师常用的 Photoshop、Sketch 设计软件中都有对应的设置。基本上，所有的网页都需要定义 font-family。为了保持同一个网页在不同平台环境的兼容性，需要写不止一个字体。font-family 也是可以根据不同网站风格和需求设置不同的字体。那么这里就拿个结构更简单、理解更容易的例子来说明。比如一个比较标准的 font-family 例子，不同字体用英文逗号隔开，含有空格的要加英文双引号。调用规则是：如果浏览器不支持第一个字体，则会尝试下一个，以此类推。由于英文字体中大多不包含中文，需要先对英文字体声明，这样不会影响到中文字体的选择。所以优先使用效果最好的英文字体，中文字体声明则紧随其次。为了让 Mac 系统使用到显示效果最好的字体，优先声明 Mac 系统字体。Win 系统默认没有安装 Mac 系统字体，因此会延后调用 Arial 和微软雅黑。

字体两种最基础：有衬线字体 serif 和无衬线字体 sans-serif。其中衬线指的是字母结构笔画之外的装饰性笔画，比如宋体就是典型的有衬线字体，常用于印刷。而在互联网时代，用的最多的是无衬线字体，比如微软雅黑。所以在 UI 设计中，主要界面框架基本使用的就是无衬线字体。一段 font-family 代码，最后一个 sans-serif  就表示无衬线字体。关于通用字体族名，有5种：serif 衬线字体族；sans-serif 非衬线字体族；monospace 等宽字体，即字体中每个字宽度相同；cursive 草书字体；fantasy 主要是那些具有特殊艺术效果的字体。中文字体界，两个有代表性的分类——宋体和黑体，分别对应着衬线字体和无衬线字体。选择字体的时候要考虑多操作系统。例如 MAC OS 下的很多中文字体在 Windows 都没有预装，为了保证 MAC 用户的体验，在定义中文字体的时候，先定义 MAC 用户的中文字体，再定义 Windows 用户的中文字体。

所以，为什么 Windows 显示微软雅黑，Mac 显示苹方，归根到底还是在于系统中有没有安装对应的字体。兼顾中西，西文在前，中文在后。Font-family 设置的目的就是让不同的系统在面对错综复杂的字体环境时，能够选择出适合自己显示效果最好的字体，以此提高网页界面的视觉兼容性，提升用户体验。