[设计]字体盘点

盘点几个常用的字体(Windows的字体渲染机制相比于Linux做的已经不错了，所以这篇文章对Linux的日常使用帮助更大些)。

Steven-Zhl 头像
[设计]字体盘点

这篇文章用于汇总不同的字体，并展示效果。因为用了不少cdn加载字体，这篇文章可能加载速度比较慢，见谅。

1. 字体相关知识

一些没太大用的知识，但了解一下也可以。

1.1 衬线与无衬线

衬线和无衬线的主要区别在于，衬线字体的笔画有一定的粗细变化，有边角装饰；而无衬线字体的笔画粗细基本一致，无多余装饰，追求极简。

  • 衬线这一概念起源于英文，指的是字体笔画在首尾的装饰和笔画粗细，又称“字脚”。衬线体天然带有一种优雅和艺术气息，所以多用于印刷品。无衬线体没有笔画首尾的装饰，笔画粗细也相同。因为无衬线字体显得比较工整，且适合在显示屏上显示而逐渐受青睐。现在无衬线体已成为主流字型，大部分电子设备默认使用的都是无衬线体。
  • 总结一句话大概就是：衬线适合用于标题，无衬线适合用于正文；手写体多属于衬线，印刷体多属于无衬线。这倒也不绝对，但大部分情况下是这样的。
  • 通常，衬线字体用”Serif“标注，无衬线字体用”Sans Serif“或直接用”Sans“标注。
  • 举个例子：中文字体中，Noto Sans是无衬线字体，Not Serif是衬线字体；英文字体中，Crimson Text是衬线字体，Arial是无衬线字体：

   Crimson Text:  The quick brown fox jumps over the lazy dog.
   Arial:  The quick brown fox jumps over the lazy dog.

1.2 等宽与非等宽

在意是否等宽的也许主要是程序员，因为在代码编辑器、终端中，等宽字体会比非等宽更易于排版，提高可读性。

  • 简单来说，等宽字体就是无论大小写字母、数字、符号，每个字符的宽度都是一样的，而非等宽字体(也称比例字体)则不是。是否等宽的衡量范围通常只包括英文字母及数字，因为中文的字通常都是方形，本就等宽，且中英做不到等宽。
  • 大多数字体为了遵循书写习惯，并不是等宽字体，比如”l”就是比”L”窄。
  • 通常在设计时做到了等宽的会在字体名称中标注 Mono ，但不标注的却也不一定是非等宽。
  • 举个例子，Cascadia Code是等宽字体，Arial是非等宽字体，下面示例中能很清楚地看出来“Arial”中A和l的宽度并不相同：

   Cascadia Code:  The quick brown fox jumps over the lazy dog.
   Arial:  The quick brown fox jumps over the Lazy dog.

1.3 连字(ligature)

  • 连字是一种特殊的字体渲染样式，能够将实际文本中的两个(或多个)字符以一个字符的样子渲染出来，这一点对于提高代码可读性有用。例如Cascadia Code能够将 != 直接渲染成!=。
  • 但目前这一特性并没有广泛使用，应该说这一功能很小众，大概只有代码编辑器提供选项(例如Visual Studio Code和JetBrains系软件)，而且也只有少数字体支持该特性(例如Cascadia Code、JetBrains Mono、Fira Code等)。
if (a != b) {
    // do something
} else if (a == b) {
    // do something
}

1.4 Nerd Fonts

  • Nerd Fonts是一个用于修改已有字体的项目，主要修改是通过添加字形的方式，在字体中添加了一些特殊字符，主要是各种图标。
  • 根据官方Wiki的描述，该项目最初是为VimDevIcons(一个Vim插件)而创建的，主要目的是为了在Vim中显示图标，因此该项目修改的字体多为等宽字体，非常适合代码和命令行，所以现在谈及美化终端，换一个支持Nerd Fonts的字体几乎成了必不可少的一步。
  • 但…由于经常使用终端的人并不多，了解终端美化的人就更少了，所以Nerd Fonts算是个更小众的东西。
  • 经Nerd Fonts修改的字体通常会在名称中带有Nerd Font或NF作为标识，例如Fira Code Nerd Font、CaskaydiaCove Nerd Font等。
  • 下面是使用Fira Code Nerd Font的效果，实际上终端中的效果是彩色的，图标也能正常显示：
   ░▒▓   ~ ▓▒░ sudo apt upgrade ░▒▓ ✔ 23:27:44  ▓▒░

1.5 字体文件

在这一节我们只聊一聊最常见的几种字体文件的格式，对于那些昙花一现或最后没能留下的，我们在此不多做评价

  • ttf(Truetype Font)：最常见的字体文件类型，由苹果和微软共同开发，历史较早，支持度最好，也是目前使用率最高的字体文件类型，在Windows/MacOS/Linux/Android系统中都被广泛使用
  • otf(OpenType Font)：由微软和Adobe共同开发，相比ttf，otf有很多新特性，目前主流系统的新版都已经支持。但otf相比ttf并没有根本上的改变，且otf的历史相对较短，因此使用率还是较低一些。
  • woff(Web Open Font Format)：专为Web设计的字体格式标准，大多数资源都是根据otf或ttf压缩而来。因为woff解决了ttf/otf文件太大的问题，因此在Web中被广泛使用，主流浏览器基本上都支持，相比之下各类系统对woff的支持则缺乏动力。woff2是woff的升级版，压缩率更高，但兼容性稍差一些。

2. 测试语句

2.1 西文字体

  1. The quick brown fox jumps over the lazy dog.

    这句话包含了所有的英文字母，所以可以用来测试字体是否包含了所有的英文字母。

  2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum是指一篇常用于排版设计领域的拉丁文文章，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。

2.2 中文字体

由于中文字符较多，没办法在较短的篇幅内完成测试，也没有一个公认的测试方法，以下列举一些已有的的测试方法，以作参考。

当然，你也可以在这里整活，比如一部完整的蔡徐坤名场面或马保国名场面。

  1. 鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础……

    这是Google Fonts的做法，使用了使用联合国《世界人权宣言》的节选内容，估计谷歌也没想着真去测试字体样式，只是想用这段话展示一下字体效果。

  2. 这句话后来演变成“饮水思源”这个成语，意为喝水的时候想一想流水的源头，比喻不忘本。

    这是Adobe Fonts的做法，使用了“饮水思源”这个成语的释义。思源系列字体是Adobe和Google合作开发的开源字体库，可能也正是因为开源，这一系列字体中文译名为“思源”，取“饮水思源”之意。

  3. Innovation in China 中国智造，慧及全球 0123456789

    这是比较新版的Windows系统中的测试语句，其中的中文部分是微软中国研发部门的Slogan。不过“中国智造”这句其实很早就被宣传部门广泛使用过了，很多中国人会非常熟悉这一句。

  4. 我能吞下玻璃而不伤身体。

    这是Gnome在设置字体时的预览语句，取自一个语言学项目(The I Can Eat Glass Project)。这句话并无特殊意义，只是字面意思，但如果只看字面意思又比较奇怪。

  5. 现代社会以海德格尔的一句“一切实践传统都已经瓦解完了”为嚆矢。滥觞于家庭与社会传统的期望正失去它们的借鉴意义。但面对看似无垠的未来天空，我想循卡尔维诺“树上的男爵”的生活好过过早地振翮。

    这是2020年浙江高考满分作文《生活在树上》的原文节选，个人认为这篇文章的晦涩程度比寻常文言文更甚，而我是支持“文以载道”的，自然不喜欢这种文章。但这篇文章中诸多的生僻字，却使它非常适合用来测试字体。

  6. 滚滚长江东逝水，浪花淘尽英雄。是非成败转头空，青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢，古今多少事，都付笑谈中。

    这是明代文学家杨慎的《临江仙·滚滚长江东逝水》全文，因被用作电视剧《三国演义》的主题曲歌词而广为流传。

3. 字体盘点

这里的几类字体并没有什么标准类别，只是根据字型特点，大致按照用途进行划分，以下内容仅按照拼音顺序排列。

3.1 正文字体

前面也说了，无衬线字体在屏幕上的显示效果比衬线效果更好，所以现代电子媒体大量采用无衬线字体作为正文字体。

3.1.1 更纱黑体(Sarasa-Gothic)

无衬线 等宽

这个字体目前没找到cdn，加上我也没用过，就不展示效果了。

3.1.2 苹方(PingFang SC, PingFangSC)

无衬线 非等宽

The quick brown fox jumps over the lazy dog.
滚滚长江东逝水，浪花淘尽英雄。是非成败转头空，青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢，古今多少事，都付笑谈中。

  • 苹方是苹果公司委托台湾的威锋数位替苹果操作系统所开发的专有字体家族。最初只在苹果设备中流行，但很快，设计行业从业者发现苹方的显示效果比先前主流的无衬线字体要好，遂声名鹊起，目前也是最流行的中文字体之一。
  • 不过其实我没用过苹方字体，现在用cdn加载出来，在高分屏上也看不出什么区别，就不多评价了。

3.1.3 思源黑体(Noto Sans CJK, Source Han Sans)

无衬线 非等宽

The quick brown fox jumps over the lazy dog.
滚滚长江东逝水，浪花淘尽英雄。是非成败转头空，青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢，古今多少事，都付笑谈中。

  • 思源黑体是Adobe和Google合作开发的开源字体库，目前已经包含了中日韩越泰等多种语言的字体，是目前最全面的开源字体库，并且也正是因为开源，或者说免费商用，它的应用领域非常广泛，也许是使用量最多的无衬线正文字体。
  • 思源黑体在Google Fonts中名为”Noto Sans CJK”，在Adobe Fonts中名为”Source Han Sans”，但只是叫法不同。目前我的Linux使用的系统字体正是Noto Sans CJK SC，它的视觉观感、高dpi适配、字体渲染效果都非常好，个人很喜欢。

3.1.4 微软雅黑(Microsoft YaHei, MSYH)

无衬线 非等宽

The quick brown fox jumps over the lazy dog.
滚滚长江东逝水，浪花淘尽英雄。是非成败转头空，青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢，古今多少事，都付笑谈中。

  • 微软雅黑是微软公司委托中国方正集团设计的一款支持ClearType技术的字体，在很长一段时间都作为Windows中文版的默认字体。虽然评价褒贬不一吧，但依托于Windows庞大的用户群体，微软雅黑还是成为最主流的中文字体之一。
  • 我曾寻找过很多字体作为Gnome的系统字体，微软雅黑是第一个试的，也是第一个放弃的，字体发虚严重，且换了多种抗锯齿策略都解决不了。

3.2 艺术字体

3.2.1 得意黑(Smiley Sans)

无衬线 非等宽 斜体

The quick brown fox jumps over the lazy dog.
滚滚长江东逝水，浪花淘尽英雄。是非成败转头空，青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢，古今多少事，都付笑谈中。

  • 得意黑是oooooohmygosh与atelierAnchor锚坞合作开发设计的开源字体，在2022年11月通过Bilibili发布了其宣传视频后取得了不错的反响，超百万播放和众多平面创作者的支持，算是彻底火了一把。
  • 客观来讲，得意黑作为艺术字体无疑是成功的。它的特点明显而独特：倾斜、瘦、圆角，在中文字体中几乎是唯一的。但也因为它为了艺术设计而妥协了较多的可读性，所以它完全不适合作为正文字体，尽管它无衬线。
  • 但这也正说明了它一开始的定位准确嘛，不是坏事。

3.2.2 Josefin Sans

无衬线 非等宽

The quick brown fox jumps over the lazy dog.
滚滚长江东逝水，浪花淘尽英雄。是非成败转头空，青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢，古今多少事，都付笑谈中。

  • Josefin Sans是我在使用Niagara Launcher时偶然发现的一个英文字体。
  • 和大多数英文字体不同的是，它的小写字母高度小于大写字母高度的一半，而且也对大写字母做过一些优化，连字表现很有特点。

Josefin Sans效果

  • 这意味着在实际表现中小写字母表现得格外的小，不适合作为正文字体使用，但作为标题字体还是很不错的。

3.3 等宽字体

3.3.1 Cascadia Code

无衬线 等宽 连字

The quick brown fox jumps over the lazy dog.
滚滚长江东逝水，浪花淘尽英雄。是非成败转头空，青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢，古今多少事，都付笑谈中。

  • Cascadia Code是微软公司设计并开发的一款开源字体，作为程序员字体，它具备等宽、连字等优秀特性，被微软用作Visual Studio Code和Windows Terminal的默认字体。
  • 我个人是很喜欢这套字体的，它通过一定的衬线提高了字母的区分度，并且整体上宽度合适(个人感觉JetBrains mono太瘦)，看着很舒服。目前我在用的IDE和终端都使用了这套字体(或其变体)。

3.3.2 Fira Code

无衬线 等宽 连字

The quick brown fox jumps over the lazy dog.
滚滚长江东逝水，浪花淘尽英雄。是非成败转头空，青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢，古今多少事，都付笑谈中。

  • Fira Code是基于Fira Mono的一个扩展，主要特点是加入了连字特性，该字体也是第一个支持连字的等宽字体。
  • 但通过上面的预览能看得出来，Fira Code的字符间距有些太大了，单行显示的字符数偏少，但这些小缺点并不影响它的流行，毕竟是“初代程序员字体”。

References