了一家四口的 4 个 Emoji。除了 Emoji，有一些人类语言也会用到 ZWJ。\n\n从编码到字体\n------\n\n从二进制编码到显示出一个字符，必不可少的当然还有**字体**（font）。电脑安装系统时会自带一些字体，这是必须的，否则渲染时找不到编码对应的字，就会显示一个白色长方形，被称为 Tohu“豆腐块”。谷歌的 Noto 字体其名称的一层含义就是让电脑不会出现 Tohu，虽然愿景很好，但是其实 [Noto 并没支持 CJK Ext-B](https://github.com/notofonts/noto-cjk/issues/13)。\n\n现在常见的字体有 `ttf`、`otf`、`woff`、`woff2`。\n\n`ttf`（TrueType Font）和 `otf`（OpenType）主要区别是 otf 使用三次贝塞尔曲线，而 ttf 使用二次贝塞尔曲线。另外 ttf 的 [hinting](https://en.wikipedia.org/wiki/Font_hinting) 会优秀一点，在分辨率低的机器上渲染起来会好看点。\n\n`woff`（Web Open Font Format）其实就是 tff 的核心部分进行 zlib 压缩，`woff2` 也是类似，不过压缩算法更新为 `Brotli`。\n\n因为系统需要从编码找到文字，所以很自然，字体必须维护**编码到文字的映射**。所以以前会有字体后面标注 `gbk` 的情况，就是 `gbk` 编码系统专用的字体，现在就不用说了，应该全是 Unicode 了吧。\n\n对于 CJK 字符（以及部分西方字符），同一个码点在不同地区，拥有不同字形（glyph）。而不是为每种语言都编码一个相同含义的字（grapheme），这种情况被称为 [Han unification](https://en.wikipedia.org/wiki/Han_unification)，主要是为了节省编码空间。值得注意的是，基于中文的汉字繁体和简体没有被归到同一个码点，所以繁简转换并非更换字体而是存在一个繁简映射表。\n\n![Image 6: 不同地区的字形区别](https://img.ssshooter.com/img/Source_Han_Sans_Version_Difference.svg)虽然有资料表明单个字体可以按不同区域显示不同的字形，但是实际上字体提供者都会分语言打包字体，因为将所有语言所有字符塞到一起太大了，尤其是对于网页使用的字体，打开页面要等待几十兆的字体下载体验会非常难受。\n\n举个例子，在下载 [Noto-cjk](https://github.com/notofonts/noto-cjk) 时，会推荐你按地区下载。如果非要下载 CJK 整个包，下载下来是一个 ttc 文件，实际上它也是多个 ttf 文件的集合，一个包整合了多个区域的异体字。\n\n```\n关关关关关\n```\n\n浏览器会遵循 `lang` 的指示使用各个语言的默认字体渲染这些文字，于是你就能看到不同语言间的字形差异了。不过注意，**如果你的网页字体被设置为某一语言的字体，且字体命中了当前字符浏览器就不会回退到其他语言的默认字体**，例如微软雅黑，是中文简体的默认字体，如果显式设置了 `font-family: Microsoft YaHei`，那么无论你 `lang` 设置为什么都会使用中文简体字形。\n\n字体的其他能力\n-------\n\n![Image 7: 谷歌文档上发现的奇妙连字](https://img.ssshooter.com/img/ligature/material-symbols-outlined.jpg)一天看谷歌文档发现了这种奇怪的 ICON，在复制他的时候会复制出原本的文字（也就是字符串 block）。事实上这是一款叫做 [Material Symbols Outlined](https://fonts.google.com/icons?selected=Material+Symbols+Outlined:favorite:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24&icon.color=%235f6368&icon.platform=web) 的字体，他之所以能让一串字符显示出图标，是使用了一种被称为**连字**（ligature）的技术。简单来说就是匹配到一组字符的时候，会被自动替换为另一个字符。\n\n我们可以借助 FontForge 查看到连字配置，在菜单找到 `Ligatures`：\n\n![Image 8: FontForge 查看连字的路径](https://img.ssshooter.com/img/ligature/fontforge-check-ligature.jpg)就能

你在电脑上看到的字到底是怎么显示出来的？

Podcast Information

Roles

Scripts