一路走来的“字体”

在产品的设计过程中，设计师总是期望最后产品展示的效果能与自己设计稿一模一样，但最后屏幕呈现出的效果多少会与设计稿有所出入。

这时设计会向前端抱怨屏幕显示的效果与自己的设计不符，前端也表示很无辜，这是按照设计要求实现的，怎么能怪我？

可能对大多数用户来说，没法一眼识别哪里存在差距，但细微差距的集合，对用户的整体感官差距完全是不同的。这些细微差距体现在很多方面，其中，字体就是一个纠结的地方，很难说清，但影响又无处不在。

字体的分类、历史

首先，先来介绍一下字体的分类和历史，在西方国家的字母体系，分成两大字族：

• serif（衬线字体）
• sans serif（无衬线字体）

英文字体

衬线字（如图中的 Times New Roman）是指在字的笔画开始及结束的地方有额外的装饰，而且笔画的粗细会因直横的不同而有所不同。起始和结束装饰的不同，能设计出不同风格的字体。

无衬线体（如图中的 Helvetica），没有这些额外的装饰，而且笔画粗细差不多。字形更加趋于理性，用户很难从字体的外形看出字体要表达的性格，感情。

中文字体

在中文字体中，宋体是比较标准的 serif 字体，衬线的特征比较明显。

无衬线字（如图中的思源黑体）就没有这些额外装饰，而且笔画粗细大致上是差不多。

字体的特点、如何选择

介绍了字体的分类和历史，接下来就是考虑具体使用的场景，如何选择合适的字体呢？

在平面印刷，杂志，企业 Logo 中，需要考虑：

• 表达的性格和感情
• 引起他人的关注，吸引眼球

因此，往往会使用 特殊的衬线体或者特殊设计字体。

在电子屏幕的场景下，更多的考虑：

• 清晰度
• 长时间下，是否容易视觉疲劳
• 不同字体大小是否会影响字体清晰度

在这些因素的考虑下，无衬线体没有边角的修饰，结构简单清晰，在同等字号下，无衬线的字体看上去比有衬线更大，结构更清晰的特性，更加适合屏幕。也不会因为字体本身结构笔划，影响文字内容的情感态度表达。无衬线体带来的性格，立场就是中性的，在需要大量排版阅读的文字网站中，就像空气一样，我们不会在意文字本身设计的影响。因此，更应该使用 无衬线体。

不同浏览器如何实现字体的技术

字体的选择，这是设计阶段需要考虑的事情，但如何做到屏幕显示和设计一样呢？我们需要了解不同浏览器实现显示的一些原理技术。

先介绍一下点阵字体与矢量字体：

点阵字体

点阵字体也叫位图字体，其中每个字形都以一组二维像素信息表示。

由于位图的原故，点阵字体很难进行缩放，特定的点阵字体只能清晰地显示在相应的字号下。但对于 12-16px 这样小的汉字，点阵字体常常比其它类型的字体在屏幕上更好的显示效果。

常见的点阵字体有 bdf，pcf，fnt，hbf 等格式。

对于常见的计算机操作系统，字体的显示算法需要一些字体的信息来优化屏幕显示效果，英文称为 hinting。汉字由于笔画复杂，所以 hinting 的方式与西文截然不同。使用在汉字字体中嵌入预先制作的点阵位图既可以有效地避免 hinting 算法带来的计算开销，同时屏幕上显示的汉字边缘清晰，易于阅读。

矢量字体

矢量字体中每一个字形是通过数学曲线来描述的，它包含了字形边界上的关键点，连线的导数信息等，字体的渲染引擎通过读取这些数学矢量，然后进行一定的数学运算来进行渲染。

这类字体的好处是字体可以无限放大而不产生变形。

矢量字体主要包括 Type1 和 TrueType 等几类。

系统的偏好

• Windows

  • 默认是使用很重的 hinting，直到 DirectWrite 开始才禁用 horizontal hinting
  • 字体渲染强调文字的锐利和清晰
  • 在操作系统介面和网页正文等小字号的地方比较清晰，但大幅牺牲字体的原貌

• Mac OS X

  • 完全不用 hinting 信息，只在 vertical 方向做一些 autohint
  • 字体渲染强调忠实字体设计，最大化保留字体的外形
  • 边缘平滑是为了更好地传递字体设计中的曲线等细节，而小字号时显得模糊也是在此方针下的妥协

最佳实现

考虑到 css 的“优雅降级”原则，默认我们先把 Mac OS 的字体放在最前面，中文 "PingFang SC-light"，英文 "Helvetica Neue"，降级备用字体 "Hiragino Sans GB" 和 "Helvetica"，最后考虑基础 Windows 系统自带的字体 "Microsoft YaHei" 和 "Arial"。

font-family:"PingFangSC-light","Helvetica Neue",“Hiragino Sans GB”,“Helvetica”,“Microsoft YaHei”,“Arial”
复制代码

字体设计是整个界面设计的一部分，我们很难意识到它的重要性，就像我们不会在意空气和水，但它的作用不容忽视。

参考链接

hunting引用