一路走来的“字体”

在产品的设计过程当中，设计师老是指望最后产品展现的效果能与本身设计稿如出一辙，但最后屏幕呈现出的效果多少会与设计稿有所出入。css

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

可能对大多数用户来讲，无法一眼识别哪里存在差距，但细微差距的集合，对用户的总体感官差距彻底是不一样的。这些细微差距体如今不少方面，其中，字体就是一个纠结的地方，很难说清，但影响又无处不在。算法

字体的分类、历史

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

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

英文字体

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

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

中文字体

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

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

字体的特色、如何选择

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

在平面印刷，杂志，企业 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引用