前言

优秀的字体系统首先是要选择合适的字体家族。优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。

认识字体

衬线字体

衬线（serif）的笔画有粗有细的变化，在每一笔画上都自有风格，笔画末端会有修饰，强调艺术感，适合用于博客，旅游，文化，艺术类网站。

无衬线字体

无衬线（sans-serif）的字体工整方正，给人正式的感觉，适合政务类，企业类网站使用。

中文字体

Windows

  • simsun，宋体，也是windows下大部分浏览器的默认字体，font-size较大时清晰度不佳。

  • Microsoft Yahei，无衬线字体，微软雅黑，是微软委托中国方正设计的一款中文字体。

    Mac OS

  • STHeiti，华文黑体，OS X 10.6之前的简体中文系统界面默认字体，也是目前Chrome游览器下的默认字体。

  • STXihei，华文细黑，比STHeiti文字更细。
  • Heiti SC，黑体-简，从 OS X 10.6 开始，黑体-简代替华文黑体用作简体中文系统界面默认字体，显示效果不错，但是喇叭口设计遭人诟病。
  • Hiragino Sans GB，冬青黑体，清新的专业印刷字体，小字号时足够清晰，拥有很多人的追捧。

  • PingFang SC，苹方，在Mac OS X EL Capitan上，苹果为中国用户打造，去掉了为人诟病的喇叭口。

    Linux

  • WenQuanYi Micro Hei，文泉驿微米黑，Linux最佳简体中文字体。

    英文字体

    Windows

  • Arial，无衬线西文字体，显示效果一般。

  • Tahoma，无衬线字体，显示效果比Arial要好。

  • Verdana，无衬线字体，优点在于它在小字上仍结构清晰端整、阅读辨识容易。

    Mac OS

  • Times New Roman，衬线字体，Mac平台Safari下默认的字体。

  • Helvetica、Helvetica Neue，被广泛使用。
  • San Francisco，与苹方一样，mac os最新的西文字体。

平台默认字体

1、Window下：
  • 宋体（SimSun）：Win下大部分浏览器的默认字体，宋体在小字号下（如12px、14px）的显示效果还可以接受，但是字号一大就非常糟糕了，所以使用的时候要注意。
  • 微软雅黑（”Microsoft Yahei”）：从 Vista 开始，微软提供了这款新的字体，一款无衬线的黑体类字体，并且拥有 Regular、Bold 两种粗细的字重，显著提高了字体的显示效果。现在这款字体已经成为Windows游览器中最值得使用的中文字体。从Win8开始，微软雅黑又加入了 Light 这款更细的字重，对于喜欢细字体的设计、开发人员又多了一个新的选择。
  • Arial：Win平台上默认的无衬线西文字体（为什么要说英文字体后面会解释），有多种变体，显示效果一般。
  • Tahoma：十分常见的无衬线字体，被采用为Windows 2000、Windows XP、Windows Server 2003及Sega游戏主机Dreamcast等系统的预设字型，显示效果比Arial要好。
  • Verdana：无衬线字体，优点在于它在小字上仍结构清晰端整、阅读辨识容易。
  • 其他：Windows 下默认字体列表：微软官网、维基百科、Office字体

  • 结论：微软雅黑为Win平台上最值得选择的中文字体，但非游览器默认，需要设置；西文字体的选择以Arial、Tahoma等无衬线字体为主。

    2、Mac OS下：

  • 华文黑体（STHeiti）、华文细黑（STXihei）：属于同一字体家族系列，OS X 10.6 之前的简体中文系统界面默认字体，也是目前Chrome游览器下的默认字体，有 Regular 和 Bold 两个字重，显示效果可以接受，华文细黑也曾是我最喜欢的字体之一。

  • 黑体-简（Heiti SC）：从 10.6 开始，黑体-简代替华文黑体用作简体中文系统界面默认字体，苹果生态最常用的字体之一，包括iPhone、iPad等设备用的也是这款字体，显示效果不错，但是喇叭口设计遭人诟病。
  • 冬青黑体（ Hiragino Sans GB ）：听说又叫苹果丽黑，日文字体Hiragino KakuGothic的简体中文版，简体中文有 常规体 和 粗体 两种，冬青黑体是一款清新的专业印刷字体，小字号时足够清晰，拥有很多人的追捧。
  • Times New Roman：Mac平台Safari下默认的字体，是最常见且广为人知的西文衬线字体之一，众多网页浏览器和文字处理软件都是用它作为默认字体。
  • Helvetica、Helvetica Neue：一种被广泛使用的传奇般的西文字体（这货还有专门的记录片呢），在微软使用山寨货的Arial时，乔布斯却花费重金获得了Helvetica苹果系统上的使用权，因此该字体也一直伴随着苹果用户，是苹果生态中最常用的西文字体。Helvetica Neue为Helvetica的改善版本，且增加了更多不同粗细与宽度的字形，共拥有51种字体版本，极大的满足了日常的使用。
  • 苹方（PingFang SC）：在Mac OS X EL Capitan上，苹果为中国用户打造了一款全新中文字体—苹方，去掉了为人诟病的喇叭口，整体造型看上去更加简洁，字族共六枚字体：极细体、纤细体、细体、常规体、中黑体、中粗体。
  • San Francisco：同样是Mac OS X EL Capitan上最新发布的西文字体，感觉和Helvetica看上去差别不大，目前已经应用在Mac OS 10.11+、iOS 9.0+、watch OS等最新系统上。
  • 其他：Mac下默认字体列表：苹果官网、维基百科

  • 结论：目前苹方和San Francisco为苹果推出的最新字体，显示效果也最为优雅，但只有最新系统才能支持，而黑体-简和Helvetica可以获得更多系统版本支持，显示效果也相差无几，可以接受。

    3、Android系统：

  • Droid Sans、Droid Sans Fallback：Droid Sans为安卓系统中默认的西文字体，是一款人文主义无衬线字体，而Droid Sans Fallback则是包含汉字、日文假名、韩文的文字扩展支持。

  • 结论：Droid Sans为默认的字体，并结合了中英文，无需单独设置。

    4、iOS系统：

  • iOS系统的字体和Mac OS系统的字体相同，保证了Mac上的字体效果，iOS设备就没有太大问题。

    5、Linux：

  • 文泉驿点阵宋体：类似宋体的衬线字体，一般不推荐使用。

  • 文泉驿微米黑：几乎是 Linux 社区现有的最佳简体中文字体。

font-family

设置原则

  • 西文优先：西文字体中大多不包含中文，西文优先，中文紧随其后，这样就不会影响到中文字体的选择。
  • 从新到旧：优先体验最好的字体，向下兼容。
  • 兼容多种操作系统：考虑windows, mac os, android, linux等系统。
  • 补充字体族：最后根据衬线serif或无衬线sans-serif来补充字体族，当所有设置的字体都找不到时，让操作系统有选择字体的方向。

注意问题

1、字体的中英文写法：

我们在操作系统中常常看到宋体、微软雅黑这样的字体名称，但实际上这只是字体的显示名称，而不是字体文件的名称，一般字体文件都是用英文命名的，如SimSun、Microsoft Yahei。在大多数情况下直接使用显示名称也能正确的显示，但是有一些用户的特殊设置会导致中文声明无效。
因此，保守的做法是使用字体的字体名称（英文）或者两者兼写。如下示例：

  1. font-family: STXihei, "Microsoft YaHei";
  2. font-family: STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑";

2、声明英文字体：

绝大部分中文字体里都包含英文字母和数字，不进行英文字体声明是没有问题的，但是大多数中文字体中的英文和数字的部分都不是特别漂亮，所以建议也对英文字体进行声明。
由于英文字体中大多不包含中文，我们可以先进行英文字体的声明，这样不会影响到中文字体的选择，因此优先使用最优秀的英文字体，中文字体声明则紧随其次。如下示例：

  1. font-family: Arial, "Microsoft YaHei";

3、照顾不同的操作系统：

  • 英文、数字部分：在默认的操作系统中，Mac和Win都会带有Arial, Verdana, Tahoma等几个预装字体，从显示效果来看，Tahoma要比Arial更加清晰一些，因此字体设置Tahoma最好放到前面，当找不到Tahoma时再使用Arial；而在Mac中，还拥有一款更加漂亮的Helvetica字体，所以为了照顾Mac用户有更好的体验，应该更优先设置Helvetica字体；Android系统下默认的无衬线字体就可以接受，因此无需单独设置。最后，英文、数字字体的最佳写法如下：

    1. font-family: Helvetica, Tahoma, Arial;

  • 中文部分：在Win下，微软雅黑为大部分人最常使用的中文字体，由于很多人安装Office的缘故，Mac电脑中也会出现微软雅黑字体，因此把显示效果不错的微软雅黑加入到字体列表是个不错的选择；同样，为了保证Mac中更为优雅字体苹方（PingFang SC）、黑体-简（Heiti SC）、冬青黑体（ Hiragino Sans GB ）的优先显示，需要把这些字体放到中文字体列表的最前面；同时为了照顾到Linux操作系统的体验，还需要添加文泉驿微米黑字体。最后，中文字体部分最佳写法如下：

    1. font-family: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";

    中英文整合写法：

    1. font-family: Helvetica, Tahoma, Arial, "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";
    2. font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";

    4、注意向下兼容

    如果还需要考虑旧版本操作系统用户的话，不得不加上一些旧版操作系统存在的字体：Mac中的华文黑体、冬青黑体，Win中的黑体等。同样按照显示效果排列在列表后面，写法如下：

    1. font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", STXihei, "Microsoft YaHei", SimHei, "WenQuanYi Micro Hei";

    加入了STXihei（华文细黑）和SimHei（黑体）。

    5、补充字体族名称

    字体族大体上分为两类：sans-serif（无衬线体）和serif（衬线体），当所有的字体都找不到时，我们可以使用字体族名称作为操作系统最后选择字体的方向。一般非衬线字体在显示器中的显示效果会比较好，因此我们需要在最后添加sans-serif，写法如下：。

    1. font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

    6、等宽字体

    在中后台系统中，数字经常需要进行纵向对比展示，我们单独将数字的字体 font-variant-numeric 设置为 tabular-nums，使其为等宽字体。

    其他问题

    1. 不声明不就是系统字体吗？

    不声明字体时，浏览器渲染的是 默认字体，不一定是 系统字体。比如 macOS ，Chrome 默认渲染华文黑体（ST Heiti），而非系统字体 苹方（PingFang SC）；Windows 7，浏览器默认渲染中易宋体（Simsun），而非系统字体微软雅黑（Microsoft YaHei）。
    我们标准化的核心思路是使用系统 UI 字体。
    显式地声明字体，更重要的是 保证页面样式的安全与可控。比如，我们为 Android 声明英文字体 Roboto 与中文字体思源黑，是因为 Android 机型百(luan)家(cheng)争(yi)鸣(tuo)。实际上，即使如此，正如我们的测试结果所示，我们还是不能保证所有 Android 机器都”正确“渲染。因此我们更认为这样有必要。

    2. 写得越多就一定越好吗？

    回过头看知乎的 font-family ：

    1. font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;

    写得越多显得越专业吗？恐怕不是的。也许正是因为专业、经过了思考，知乎才对字体做了删除、中文字体只做了最基本的 sans-serif 限制。即使在 Windows 7 上，这套 font-family 的渲染是 Arial 和 中易宋体（Simsun），即使在 macOS 上英文字体也没有使用最新的 San Francisco，不过 它真的足够安全。
    而我们考虑到业务场景需求，在安全的基础上，尽量优化各平台的显示效果。
    所以这东西，不能以好与坏来衡量。

    3. 对于设计团队的意义是什么？

    对于设计师而言：
    设计师了解各平台的字体分布、了解字体选择的限制，以及用户在该平台的基本体验；
    在实现设计稿时，能根据所针对的平台，调整设计稿所用的字体，保持设计稿字体与用户所见最终效果的一致。
    对于 UI 工程师而言：
    保证各项目字体样式的标准统一；
    对字体样式的调试有更清楚地把控。