阅读 791

一路走来的“字体”

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

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

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

字体的分类、历史

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

  • 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引用

关注下面的标签,发现更多相似文章
评论