「Typeface」- 字体 | Font Family

认识

A typeface (or font family) is a design of letters, numbers and other symbols, to be used in printing or for electronic display.

注意,Typeface 与 Font Family 两者含义相同。但是,Typeface 与 Font 是不同的概念,不可互换:Typeface,其表述的是字的形状,但不包含大小、粗细等等特征;Font,其包含这些特征(例如,大小、粗细、倾斜、……)。

组成

字形 Glyph

字形;符号;雕文;雕纹;

象形文字

字体 and 字符集

How are character encodings related to fonts?
Wikipedia/Code point
Wikipedia/Character encoding
What’s the difference between a character, a code point, a glyph and a grapheme?
Character encodings: Essential concepts
Unicode Consortium
字体编辑用中日韩汉字 Unicode 编码表
Unicode 与 JavaScript 详解
字符编码笔记:ASCII,Unicode 和 UTF-8

每个「字符」都有对应的「码位」,「码位」是对「字符」的编号,它是一个普通的数字。

在将「码位」保存到存储(硬盘)中时,需要用到「字符集」。将「码位」按照「字符集」的规则进行转化,然后保存到存储中。

而「字体」是对应到「码位」的,「字体」与「字符集」没有直接的关系。

所以说,文件中保存的是编码,这也是「打开文件时需要使用正确字符集」的原因。当打开文件中,读取到的实际上是「编码」,「编码」解析为「码位」,由「码位」找到对应的「字体」。

性质

Serif vs. Sans-Serif

在排版上,有个概念叫衬线字体——这个就不局限于代码字体了。基本可以认为那些字体上带各种勾勾和花边的就是衬线字体。

衬线字体早期是适应于印刷品的,因为最早的打印设备出墨不均匀,衬线字体那些额外的花边更有利于阅读者识别文字;

例如,Times New Roman、中文宋体、……

针对去掉这些额外装饰的字体就,则是非衬线字体(也就是常说的 Sans-Serif,这其实是个法语单词)。

随着电子载体的流行,印刷问题得以解决,非衬线字体得以流行。现在电脑手机上系统界面自带的字体大概率就是非衬线字体。主要是因为非衬线字体视觉干扰比较小,也被认为更易于屏幕渲染和阅读。

例如,Arial、微软雅黑、……

代码字体主要是非衬线的,但也有很多常用字体会带少量衬线以显得美观和活泼。比如,Fira Code、Cascadia Code、……

Monospace vs. Proportional

字体一般分为:

等宽字体,Monospaced Font

该“等宽”意味着每个字符的宽度是一样的。在代码中,我们一般希望每一行的各个字母是对齐的,更易于阅读,所以建议使用等宽字体 —— 用于代码开发的字体也基本都是等宽字体。

Mono,这代指 Monospace(等宽字体)。另外,即使 Font 没有带后缀 Mono,也不一定说明它就是非等宽字体,比如常用的 Consolas 就不带这个 Mono 后缀。

非等宽字体,Proportional Font

该“非等宽”意味着每个字符宽度不一致。比如,在网页中,很大概率看到这里出现的字母 i 比其他字母比如 W 要窄得多 —— 这就是非等宽字体,它们的目的是为了平衡视觉重心,让排版更美观。

偶尔也能看到 Proto 后缀,其表示非等宽字体。

Ligature vs. No-ligature

某个字体带 LF 后缀,这个是 Ligature(连字)Font 的简写。连字就是给常用的一些字符组合做特殊处理,让它们看起来更连贯。

比如,把 != 给你渲染成 ≠,等等。

其实,连字通常也会给部分常用的符号做一些很小的细节处理,像是 ||、++、–、///,让它们看起来更紧凑,可能需要仔细对比才能发现。

许多为编程设计的字体是默认带连字支持的,比如 JetBrains Mono、Cascadia Code 和 FiraCode;

某个字体带 NL 后缀,指不带连字(No-ligature),比如 JetBrains Mono NL 字体。(所示如图,上面一行是开启连字时,下面一行是关闭连字时)。

也有一些不带连字的,比如 Consolas、Monaco、Menlo、Hack。很多不带连字的字体也有社区打的补丁包可以去支持连字,常见的就是从 FiraCode 里抠出来的连字加进去……

Width | 字宽

一般来说一个中文字的宽度是 1000,也就是一个 em-size. 为了方便阅读,大多数代码字体实际上使用 600 作为字母宽度。

这其实造成一个问题,那就是如果你代码里出现了中文会导致对不太齐,需要 5 个英文字母的宽度才能和 3 个中文字对齐。

只有少数注重纤细的字体才会使用 500 作为字母宽度,比如 Inconsolata、Ubuntu Mono、Iosevka —— 对于多数人来说这些字体其实听起来很陌生。

如果你代码中经常需要出现中文,那么它们的好处很明显,2 个英文字母对应 1 个中文字,非常整齐。

应用

该部分将介绍字体、字符集相关的内容。

Nerd Font

参考

Wikipedia/Typeface
Wikipedia/Font
Fonts in the X Window System
UTF-8
Fonts in X11R7.7
写代码用哪种字体看起来最舒适?