文字渲染的那些事（一）字體是如何存儲的？

在現代生活裏，咱們幾乎天天都會和屏幕上的文字打交道——文字看起來是如此平凡，以致於很多與 UI 相關的專業人士都對其下的複雜性知之甚少。這個系列旨在以開發者的角度，介紹一些從文字的二進制數據到像素之間流程的科普知識，但願對感興趣的同窗能有一些啓發。

字體的標準與格式

喜歡折騰系統的同窗，對於常見的字體格式確定不會陌生：Windows 系統長久以來，在 C:\Windows\Fonts 裏面就放着一大堆 TTF 格式的字體文件。相應地，在 macOS 的 /Library/Fonts 目錄裏，也有一堆字體：不過這裏除了 TTF 以外，還有後綴名爲 TTC 和 OTF 的格式。它們又有什麼關係呢？

有個有趣的問題，那就是爲何 TTF 格式字體在 macOS 和 Windows 上都能通用呢？這裏其實藏着一段微軟與蘋果的 py 交易史：在 80 年代，Adobe 開發出了基於矢量的私有字體格式 Type 1，以及打印語言 PostScript（在 PDF 格式裏就能看到）。矢量字體比起當時的點陣字體，那妥妥的就是步兵和騎兵的區別啊：

Adobe 雖然活好，但因爲一些非技術因素（錢）的問題，蘋果和微軟決定另起爐竈。蘋果開發出了矢量字體標準 TrueType，而微軟則開發出了 PostScript 的替代品 TrueImage。這兩項技術雖然在 Mac 和 Windows 之間互相受權，但真正落地成爲事實標準的只有蘋果搞的 TrueType，這對應的就是 TTF 字體格式了。

知道了 TTF 表明着 TrueType Font 以後，其它的格式均可以觸類旁通地推出來：

• 怎麼把一堆 TTF 字體全家桶打包發佈呢？咱們來個 Collection（合集）吧——因而有了 TTC 格式。
• 大佬們不要再打啦，咱們一塊兒合做開放吧——因而有了 OpenType 的 OTF 格式。
• 咱們搞 Web 最在意體積了，大家這些玩意都太大了不行啊——因而有了 WOFF 格式。

固然了，光知道後綴名，跟精通 Java/C++ 的拼寫沒啥區別。咱們不妨來看看，字體文件的裏面都藏着些什麼呢？

小探 TTF 文件

不少字體格式的規範文檔中，都會強調字體文件是由表構成的。喵喵喵？這裏說的表是 Excel 那樣的表格嗎？打開一個 TTF 格式的字體文件，你的第一印象恐怕和表格很難沾上邊：

說好的幾行幾列呢？不過，表格暗示着一種相對規整的數據結構。眼尖的同窗也許已經注意到了，上面的數據最右一列都是一組四個字母的合集。這並不是偶然，依據的是 TTF 格式的規範。

在繼續介紹它們的具體含義以前，咱們不妨考慮這樣的一個問題：怎麼樣爲設計一種符合下面這些需求的數據格式呢？

• 你有多種不一樣的字段須要存儲，每種數據有固定的格式，但長度都是可變的。
• 須要存儲的字段種類可能不一樣，也有可能在往後擴展出一些新字段。這時應該可以向上和向下兼容。
• 無需遍歷整個文件，就應該可以獲知字段的基本信息（位置、長度等）。
• 數據體積須要儘可能小，還須要支持對內容完整性的檢驗。

如今應用層開發中流行的 JSON 格式，光是在體積儘可能小這一項上就會被首先幹掉。而 TTF 規範則給出了一種在設計數據格式規範時，可供參考的工程實踐：

• 給全部的字段取個四個字母的惟一名字，它們各自的內容都是一段連續的二進制數據。
• 在文件頭部，首先存儲一張「表達總體表結構」的表。在其中指定有多少種不一樣字段，以及它們的長度、起始位置等信息。這張表叫作 Offset 表。
• 緊接在這張表以後，逐段將這些字段表的內容拼接起來，就得到了最終的 TTF 格式字體。

讓咱們來看看這種設計是如何解決上面的這些需求的吧：

• 用於存儲字體信息的各個表，其長度和排列順序都徹底自由（是否是有些相似 Map 結構呢）。
• 字段種類和後續擴展都沒有兼容問題，解析程度能夠從 Offset 表中判斷本身對數據的支持程度。
• 在 Offset 表中，各字段數據的偏移量和長度均可以直接獲知。
• 各個字段數據都以約定的二進制形式存儲，Offset 表中還存儲了它們的校驗和，做爲完整性判斷的基本依據。

舉個簡單的例子就能說明二進制數據結構的緊湊性。例如，在表達字體是否爲粗體、斜體、等寬等元數據的時候，JSON 格式對每一個狀態，都須要約定好一個形如 xxx: true 的字段，這至少須要五個字節。而基於位運算的約定，在一個字節的 8 位中就能夠保存 8 個這樣 true|false 的布爾類型變量，每每還留有冗餘。在須要區分存儲不一樣精度數據的時候，它也有着得天獨厚的優點。因此說，在須要構建專有的數據結構的時候，TTF 這種表驅動的設計仍是有必定的參考價值的。另外，在解析這樣的二進制格式的時候，傳統命令式編程的控制流也會至關趁手：別被社區裏浮躁的聲音淹沒了，學好真正適用於不一樣場景的技術吧。

回到最初的話題，字體裏面存儲着哪些表達不一樣內容的表呢？這裏推薦 Typr.js 這個很是簡單的 Web 工具，能夠點開即用，大概是這樣：

看到了解析出的各個表內容了嗎？它們之中就存儲着從二進制比特到屏幕像素的關鍵信息。暫時到此爲止，咱們介紹了字體文件的格式與解析它的基本方式。但怎樣基於字形數據來渲染出文字呢？讓咱們下一篇見吧（若是有的話）

P.S.1 若是但願對字體的數據結構有更進一步的瞭解，這篇科普性的文章是遠遠不夠的，不妨從這篇正式的 TrueType Reference Manual 文檔開始吧。注意，這篇蘋果的文檔一開頭就甩出了個到微軟官網的連接，這在其餘場合恐怕很難看到了……

P.S.2 咱們的前端團隊很是歡迎有志於對「渲染」這件事追根究底的同窗，感興趣請郵件 xuebi at gaoding.com 哈