当字体下降时
我们经常遇到的一个排版问题是，“字体后退到底是如何工作的？”这甚至不是说Figma在这里做了一些独一无二的事情(尽管我们有自己的具体想法)，但字体后退只是很复杂，充满了怪癖和意想不到的副作用。我们的常驻字体发烧友Marcin Wichary决定深入研究这个问题，准备一份详尽的字体后备、其美感和所有陷阱的指南。
如果你遇到以下任何一种情况，请举手--不要放下。
或者，当你发送表情符号时，你觉得它看起来很好，但到达时却奇怪地被拆分给了收件人？
你在Twitter上看到有人使用很酷的字体，而你认为这个地方不允许人们选择字体？
或者，你真的知道如何在Twitter上使用这些字体，结果却有人冲你大喊，让你想起屏幕阅读器--或者抱怨看到空框。
你在一行中添加了一个表情符号--就在那一刻，该行尴尬地下移了：
你给别人送了一个很酷的Kaomoji，结果有人抱怨说他们那头看起来不是很棒：
我的感觉告诉我，在这一点上已经没有人可以放下手了。(如果您真的举手了，谢谢！)
这些小小的违规行为可能会令人困惑，但不会令人沮丧到花时间解剖的地步。它们看起来就像小虫子，弥漫在我们无味的机器的日常互动中。
但这些不是虫子，至少不是传统意义上的虫子。所有这些例子都是可以解释的。此外，所有这些都有一个共同的潜在原因--一个重要的、在某些方面非常令人印象深刻的计算机排版机制，我们中的许多人可能完全没有意识到这一点。当字体用完字符时，这种机制可以帮助字体，这称为字体后备。
作为一名文字设计师，您的工作之一就是为您的字体提供所需的每一种字形。
字形是一个印刷术语，大致表示一个字符。即使是一个简单的西方字体也有两百多个字形：26个字母加上同样的一串大写字母，还有10个数字、符号、标点符号和重音。
当然，并不是每种字体都是西方字体。如果您是为中文和日文文字设计的，那么您的字形将有数千个。但无论哪种方式，总会有字形可供绘制，即使是在较小的字体中也是如此：符号和连字、深奥的标点符号、用于OpenType功能的数字和字母替代。支持另一种书写系统会添加一组完全不同的字形，而且总会有另一种书写系统-如果您支持拉丁文，为什么不覆盖整个西欧呢？然后是中欧？然后是希腊语？然后是西里尔文？越南人呢？
在某种程度上，你必须划清界限。那条线是最后一个字形。它附带了一个技术名称.notdef，其中的圆点表示它与其他任何产品都不同。.notdef是最后的字形，当一种字体被要求输入其设计者没有费心绘制的字符时使用。
.notdef是字体回退的原始版本-这是对物理打印时不存在的问题的基本解决方案。在金属字体的世界里，当你手里拿着一个字母时，你也拿着它特定的字体--所以不可能要求一种字体输出它从未听说过的字母。但是计算机在字体和文本之间划出了一条奇怪的距离。计算机可以显示其他人可能很久以前写的文本，并使用创建者未知的字体，或者在创建该文本时可能根本不存在的字体。因此，字体需要能够说，“我不知道这个特定的字符应该是什么样子。”
.notdef通常看起来像一个简单的矩形，有时里面有一个十字。它是“这个空格故意留空”的缩写。它不是具有自己特定代码的传统Unicode字符-相反，它只是一个矩形，它被绘制来掩盖应该在那里的字符。当您复制并粘贴它时，在引擎盖下它仍然是您想要看到的原始角色。毕竟，字体将来可能会更新为更多字形，或者您可能只需切换到支持所需字符的另一种字体：
绘制为.notdef字形的内容将由字体设计者自行确定。即使在矩形约定中，大小也会有所不同-一些字体设计师将矩形划掉，或者用问号装饰：
其他设计者放弃了，什么也不做，让.notdef成为一个空白正方形。其他人仍然是…。嗯，他们有点疯狂：
狂野的例子很少见，但是规则的矩形呢？有种感觉告诉我，你这辈子见过这种长方形不止几次。
然而，如果没有一个完整的隐形的、令人印象深刻的、独特的系统来覆盖每种字体的背面，你可能会惊讶地发现，你会更频繁地看到它们。
您熟悉和喜爱的字体后备功能(ǝʇɐɥoʇ)。
我们大多数人熟悉的字体回退的味道来自于网络。它看起来像这样：
前提很简单：该列表为浏览器提供了一系列命令。“要呈现此元素，请使用名为Joanna的字体。如果你没有，现在就用Helvetica吧。不是吗？老版本的Helvetica怎么样？那些东西都没有了吗？好的，就选阿里亚尔吧。没有咏叹调吗？主啊。如果你推荐的话，随便买什么普通的无衬线就行了。
列出的第一种字体通常是Web字体，与网站本身打包在一起。如果它无法加载-或者如果它需要太长时间才能到达-接下来推荐的几种字体是那些已经在用户中流行的字体，或者安装了各种操作系统的字体。
第一种字体是完美的场景。每一个更进一步的缺口都是更深的后退，也是更大的妥协。你几乎可以想象，每一种字体都伴随着网站设计师更容易听到的呻吟，把控制权从精心修剪的、通常是独特的、旨在代表网站品牌或情感的字体，让给越来越通用的字体--可靠、肯定，但并不那么令人兴奋。
字体后备从CSS一开始就存在，因为我们认识到，在我们的历史上，从来没有一次每台计算机都有相同的字体集，这是因为我们认识到，在我们的历史上从来没有一次每台计算机都有相同的字体集。
在字体列表之外，CSS字体后备并没有让Web设计者对字体后备进行更具体的控制：没有关于最终选择哪种字体的反馈，没有对大小、粗细或字母间距的额外调整。我很遗憾地报告，今天它仍然没有。唯一有意义的改变是为UI字体增加了几个更通用的词，这只是在过去十年里才流行起来的(一个例子是System-UI，它有自己的字体后备恐怖故事)。
但是，即使字体后退看起来既陈旧又简单，您可能会对两件事感到惊讶。第一个是它不是在字体级别上操作，而是在字符级别上操作。第二个呢？您在CSS中声明的内容只是字体回退的一小部分。
在字符级别上操作意味着浏览器或操作系统会重新访问您的字体回退链，因为您要求他们打印的每个字母都是如此。如果一种字体没有该字符，则会尝试列表中的另一种字体，依此类推。
我电脑上的乔安娜版本有261个字形，覆盖了几个相邻的字母，但其他的就不多了。我现在没有Helvetica，所以我们可以跳过那个。传统的Helvetica有惊人的2252个字形，可以处理西里尔文、乔治亚文和越南文-外加许多数学和货币符号。但Arial更好。我们经常嘲笑的Helvetica的私生化提供了超过3,300个字形，在支持希伯来语、阿拉伯语和…方面击败了Helvetica。半书法。
如果我要求浏览器使用上面的字体后备列表排版一个多语言句子，它将显示为：
这不是一个好看的句子，说明了字体后退时控制有限的一些挑战。德语没有苏格兰人，它的几个额外的变音字母和蓬勃发展的经济确保了它的覆盖范围，即使是用较小的字体。但Helvetica的俄语和Arial的希伯来语感觉不对劲-太大太厚-波兰集市更糟糕，四个字母中只有一个回到Helvetica。
但话又说回来，与前面的例子相比，这至少是一个可读的句子。字体工程师经常亲切地称这些盒子为“豆腐”(其他人打印也不安全)，现在已经无处可见了。
如果您恰好对文本拥有绝对控制权，您仍然可以选择每个字符并委派特定的字体为其提供服务，使一切看起来都完美无瑕。但你不一定非得这样。而且，在网络的宇宙中，文本可以来自任何地方和任何时间，你可能不想成为这样的人。
使用Helvetica和Arial等字体或其他配备了数千个字形的流行字体仔细调整字体备用列表，这不仅是保留样式的好方法，也是确保覆盖范围的好方法。它有时帮助我将字体想象成模板-每个字体都准备好捕捉尽可能多的字母，但每个字体本身也有很多洞。字体回退链允许下一种字体捕捉前一种字体留下的字母，依此类推：
但这是你可能已经注意到的另一个惊喜。我在字体备用中列出的字体都不支持马拉雅拉姆语。也没有一个包含任何表情符号。那么，为什么这两个符号仍然呈现为有意义的字形，而不是豆腐呢？
原来，在您完成字体后备列表之后，您的浏览器或操作系统会悄悄地添加十几种字体来帮助您，其中包括一些专门为此目的创建的字体。
如果Arial对超过3300个字符感到印象深刻，那么只需看看整个Unicode的范围即可。今天的通用标准规定了如何对数字通信中的每一个字符进行编码，今天的版本中有超过14万个这样的字符。明天的会更多。
与早期的计算机相比，这是一个令人印象深刻的数字，因为早期的计算机很难处理63、127个字符，或者-如果你幸运的话-255个字符。但是，如果你考虑到Unicode是为了涵盖150种不同的文字(从无处不在的拉丁语到像Old Peric这样的晦涩的文字，这是一种14世纪改编自西里尔文的文字，在400年前就已经停止使用)和数万个符号(其中包括数百个箭头、数学符号、多米诺骨牌瓷砖、炼金术和埃及象形文字，就在它们的现代转世表情符号旁边)，这是有意义的。
对于字体设计者来说，绘制14万个字形的任务将是残酷的、令人精疲力竭的、难以克服的。即使有人选择这样做，也会导致字体文件太大以至于可能无法加载。
但是，如果没有包含所有字符的字体，那么对于网页设计者来说，另一种选择就会变得令人苦恼。想象一下，在这种情况下将维基百科的排版组合在一起-被迫为Unicode的不同部分寻找不同的字体，记住哪个字体做了什么，偶尔更新它们，维护巨大的字体后备链，等等。
您的操作系统和浏览器可以做到这一点，这样您就不必这么做了。它们通过将一系列字体排队，并要求这些字体捕捉您的字体后备链不支持的任何字符来实现这一点。
举个例子，我的Mac上的四字体列表被悄悄地扩展，看起来更像这样：
Font-family：Joanna、Helvetica Now、Helvetica、Arial、Menlo、摩纳哥、.AppleSymbolsFB、LucidaGrande、CourierNewPSMT、GeezaPro、NotoNastaliq Urdu、Ayuthaya、Kailasa、PingFangSC、PingFangTC、HiraginoSans-W3、HiraginoSansGB-W3、PingFangHK、AppleSDGothicNeo、KohinoorBangla、KohinoorDevanagari、KohinoGujarati、Muktahee、NotoSansKannada、KhmerSangMamamMhee、NotoSangMannada、马来亚SamangamMN、NotoSangMansn、NotoSanszawi、NohaltotoOya、SinaSangMamilian、Kohinoortoortou、NojangansGanganati、Mukanhee、NotoSangMannada、马来亚SangamamMN、NotoSangMamN、Notosanszawi、Nohaltoosoya、SinaSangamimicNeo、Kohinoooru或Bangla、KohinoorDevanagari、KohinoGujarati、Mukutahee、NotoSangMaman、NotoSangMamN、马来亚SangamamMN、NotoSangansm。
Font-family：Joanna、Helvetica Now、Helvetica、Arial、Tahoma、Segoe UI、Segoe UI History、Segoe UI Symbol、Segoe UI Emoji、Cambria Math、Abyssinsil、DaunPehn、David、DokChampa、Ebrima、Estrelo Edessa、埃塞俄比亚Jiret、Gadugi、GF Zmen Unicode、Gulim、Hannom A、爪哇文文本、老挝UI、Leelawadee UI、Kartika、Khmer UI、Malgan哥特式、Mangal、Meiryo、Microsoft New Tyue UI、Microsoft YaHei、蒙古语Baiti、Moolan Boran、MS、Ptext、缅甸、Nmalira UI、Nuossil、Nyala、Phetsarath、Plantagenet、PMingLiu、Hanavi、Saytha setot、Shruti、Sun、Syltunga、Shruti、Sun、Syltunga。Visual Geez Unicode，Vrinda，温泉一禅黑，余哥特，Arial Unicode MS，Code2000；
这些字体中的许多都负责覆盖特定的地区-例如，NotoSans缅甸和缅甸文本负责缅甸字母-而其他字体则有更具体的需求。苹果符号可以帮助你处理一切，从盲文到音乐符号，再到苹果过去的古老符号：
另一方面，Segoe UI History包含了近5000个真正古老的文字的字形-楔形文字、象形文字和类似帕提亚的手写文字，这些文字在纸张发明之前很久就消失了：
还有一些字体负责处理所有的表情符号-Mac上的AppleColorEmoji和Windows上的Segoe UI Emoji-在其他字体中是独一无二的，因为它们是彩色的。
尽管我刚才说过创建一种覆盖所有Unicode的字体会让人精疲力竭，而且是不可能的，但一些字体设计者却勇敢地尝试了这一点。在上面的秘密字体备用列表中的某个地方，也有不朽的字体，数以万计的字形和每个字体都有许多兆字节-像Arial Unicode、Unifont、Code2000或Noto(如“no tofu”)-被设计为最后一个必要的模板，并尽可能多地捕获剩余的字符。
这些字体是最后要询问的真正字体，是字体后退最底层的最大安全网：
我承认以上两个列表有点简单化了。有些字体只出现在给定的语言中，而其他备用字体成对链接在一起-因此，例如，sans serif的备用字体看起来也类似于sans serif。在某些情况下，一些字体甚至悄悄地模仿其他字体。(例如，在某些Linux发行版中，一种名为“解放无人字体”的字体将伪装成Arial字体并悄悄地取而代之！)。
但主要原则仍然是一样的，除此之外，我们没有整天的时间，而且你保持的那只手现在可能已经很疼了。
这最终解释了我们上次要求浏览器排版句子时发生的事情-在我们指定的所有字体都举起双手后，两种秘密字体介入帮助我们：
当只有几个字符丢失时，这种双字体后备方案可供数十亿个简单的日常使用，但没有什么能阻止你排版像这样的小奇迹；一个跨越数百万年和数千公里的句子：
这不仅仅是因为你能读到这个。您也可以将其复制并粘贴到文本编辑器中，或粘贴到没有css…的网站上。即使你对排版一窍不通，在幕后也会有六种截然不同的字体被要求提供帮助。
当然，上面协作的七种字体仍然是字体。它们都有自己的背景故事，它们的度量可能在视觉上都不同(请记住，字体大小更多的是一个概念，而不是一个严格的度量)，如果它们中的一个碰巧比其他的高，浏览器会延长整行的行高以适应它。这就解释了为什么在文本中加入表情符号有时会让事情分崩离析--主要字体不支持表情符号，所以它会退回到像Apple Color Emoji这样的字体，而且这种字体的垂直度量值比你正在使用的字体略高。
但撇开这些问题不谈，这一切都奏效了，而且效果出人意料地好。事实上，这让我们所有人在处理文本时都变得非常冒险。
不足为奇的是，在14万个字符内，人们可以期待一些视觉上的重复。语言和文字随着时间的推移以一种混乱的方式演变，在没有总体规划的情况下汇聚和发散，相互借鉴和不同。
即使在英语中，人们也会混淆O(OH)和0(零)。然后，西里尔语的一部分看起来和拉丁语一模一样，而拉丁语的一部分可以假装它是希腊语。你可以像我刚才那样创造性地拼写你的外出信息“ОΟO”，其中一个字母是拉丁字母，一个是希腊字母，一个是西里尔文--通常没有人会知道更好的。圆圈本身是如此通用的形状，因此它在UNICODE中反复出现也就不足为奇了：如◯、0、◌、𝗢、𝐎、𝖮、⚪和⥁等等-正如您可以想象的那样，还有更多这样的简单形状。排版，就像它经常做的那样，有一个特殊的名字：看起来相似的字形被称为同形字形。
更重要的是，Unicode还使用了一堆格式化的拉丁字母。许多字母来自数学，不同形式的字母意味着不同的用途：运算符名称、常量、角度、变换、张量。它们单独包含在unicode中具有语义意义-毕竟，数学变量𝑎不同于向量𝐚，不应将集合𝔸与矩阵𝑨混淆。但将它们纳入其中的决定伴随着一个转折。考虑到所有这些特殊的字母表，Unicode本身包含感觉上像是字体的东西。
排版的好处和坏处之一是，字符本身不允许对如何使用它们有意见。因此，我们看到同形文字被用于邪恶的原因--我们也看到它们被创造性地使用。远离数学，我可以抓起几个用来表示数学集合的字符，说“𝕄𝕒𝕣𝕔𝕚𝕟”，就因为它看起来比“marcin”好。同样，我可以在对数论一无所知的情况下写出“𝕸𝖆𝖗𝖈𝖎𝖓”，在不打算尝试求幂的情况下写出“ᴹᵃʳᶜⁱⁿ”，或者仅仅因为我今天过得很棒就上演“𝘔𝘢𝘳𝘤𝘪𝘯𝙞𝙨C⚪⚪L”的帽子戏法。
要做到这一点也真的很容易。Unicode Text Converter等网站使用许多字体看起来很相似的事实，这些网站可以通过查找与所需字母看起来相同或足够接近的Unicode字符来快速“设置”文本的“样式”。
这是一些创造性的视觉排版，与使用古代字母ᴥ在ʕ·ᴥ·ʔ中创建熊鼻子，或使用日语片假名ツ形成著名的耸肩表情\(ツ)/不远。
在Twitter或Facebook等实际上不允许你更改字体，甚至不允许将粗体或斜体应用于他们提供的一种字体的地方，这些排版黑客感觉特别有用：
但每一次黑客攻击都是有代价的。您在计算机上看到的任何文本都不是仅供人眼使用的。经过“重新设置样式”的文本看起来很相似，但其实际含义可能有很大不同。使用搜索通常无法找到“𝕸𝖆𝖗𝖈𝖎𝖓”，这将使使用屏幕阅读器的人无法阅读文本(他们会将每个字母宣布为“数学字母M”、“数学字母a”等等)和…。是的，您知道我们正朝着这个方向前进：它还将受到字体后退的变幻莫测的影响。
这不仅是因为流行的字体中没有一种包含数学符号或专门的字母。上面看到的一些“样式”也会逐个字母地在Unicode的各个部分之间跳转。因此，它们中的大多数将退回到系统内部深处的某些字体，由于字体退回在不同的平台上是如此不同，因此无法确切知道这些字体将如何显示在系统的另一边。这里有一个例子：
作为一名排版工人，我对此感到遗憾--作为一个关心可访问性的人，我建议不要使用数学之外的任何特殊的“字体”。但就像上面的乌龟或象形文字示例一样，五种字体的协同工作也有一些美丽的东西，它们结合在一起向您展示了一个简单的翻表表情符号-几个框-dra的合力。
.
