引子 近一個月都在與字體打交道，查閱了不少資料。 發現國內很少有這方面的一些資源，有點奇怪。 故此，想稍微梳理一下這方面的一些資料以及信息，方便對這方面感興趣的朋友參閱。 文字渲染的組成 文字渲染嚴格意義上來說包含幾個主要的核心模塊，分別是： 1.字體光柵化 FreeType 它是一個軟體字體引擎， ...
引子
近一個月都在與字體打交道，查閱了不少資料。
發現國內很少有這方面的一些資源，有點奇怪。
故此，想稍微梳理一下這方面的一些資料以及信息，方便對這方面感興趣的朋友參閱。
文字渲染嚴格意義上來說包含幾個主要的核心模塊，分別是：
1.字體光柵化
它是一個軟體字體引擎，它被設計成小巧、高效、可高度定製和可移植，同時能夠生成高質量的輸出(字形圖像)。它還可以用於圖形庫、顯示伺服器、字體轉換工具、文本圖像生成工具和許多其他產品。
2.字體適配
主要用於配置、定製管理系統里的
3.Unicode文本雙向演算法
主要用來轉換不同語系中存在的文本方向問題，例如右向左的文本， 翻轉後為左向右順序的文本。
4.文字塑形
HarfBuzz是一種文字塑形佈局引擎(text shaping library)，它主要將Unicode轉換為格式正確且位置正確的字形輸出。
簡單地說就是用於適配全世界不同語言的文字編碼佈局。
另一個非常知名庫是
5.佈局渲染
當你拿到字體字形的數據之後，毫無疑問，
肯定是需要一個佈局渲染引擎把這些文字在對應的位置上畫出來。
在手機或者PC端的操作系統中我們看到的文字，是經過以上這個幾個步驟處理之後才能正常且正確地呈現出來。
而時至今日，文字已經沒辦法滿足大家在網路上一些表達上的需要，
從普通的文字，再到字元畫，再到如今各式各樣的emoji表情。
文字渲染這個領域已經有了更多新的需求和呈現。
那現代的文字渲染的架構是什麼樣的呢？
我們來看下安卓的文字繪製架構圖：
此圖摘自(https://medium.com/mindorks/deep-dive-in-android-text-and-best-practices-part-1-6385b28eeb94)
我們看到，字體光柵化採用了FreeType,渲染採用了Skia,佈局塑形採用了HarfBuzz和ICU，
他們最終通過一個名為Minikin庫向外部提供能力。
那Minikin是個什麼東西，它到底幹了些啥呢？
Minikin 是一個安卓中實現的一個文本佈局庫，並且知名框架Flutter使用的
Minikin的代碼倉庫: https://android.googlesource.com/platform/frameworks/minikin/
從其源代碼中，可以大致看到，Minikin做了 字體管理，斷句斷行，emoji字元的判別，Unicode文本雙向演算法，佈局以及測量等。
可謂是麻雀雖小五臟俱全，真的是一份非常值得深入學習的資源。
當然有一個非常不友好的地方就是，它依托著FreeType，Skia，HarfBuzz，ICU四大庫。
而這四大庫，其中任何一個庫學習起來都有夠受的，就別提一共4個。
但是，如果要做好文字渲染這件事情，這就是必須越過的四座大山。
那如何入門是好？
一般情況下，如果我們只做中英文的文字渲染，我們暫時不考慮 字體適配，Unicode文本雙向，文字塑形佈局。
那隻要把重心放FreeType和Skia上就足夠了。
也就是兩個步驟:
1. 載入字體
2. 畫出來
就是這樣簡單粗暴。
為了方便大家學習和理解這方面的知識，博主為大家準備了兩份代碼。
1.移除FreeType的libpng第三方庫，改用LodePng替代，主要是簡化編譯。
代碼倉庫地址：
https://github.com/cpuimage/freetype
這裡要補充說明下，為什麼FreeType用到了libpng。
因為大多數的emoji表情是將PNG格式的圖片直接嵌入到字體文件里。
但是因為png格式的圖片體積太大，遷入到字體文件後，
整個字體文件過大，並且繪製還存在失真的問題。
為瞭解決上面提及的幾個問題，
最新的emoji字體採用的是SVG格式嵌入的思路，好處就是體積小，且無損，
但是對於開發者的壞處就是，將SVG光柵化為圖片，
至少需要一個svg引擎，操作起來真的麻煩。
而最新版的FreeType 2.10.2 還沒有支持svg格式，不過已經有人在嘗試擴展這個功能了。
詳情可參閱：
https://summerofcode.withgoogle.com/archive/2019/projects/6002250785226752/
2.簡易的文本繪製示例TinyText
這是博主將谷歌開源的一個物理引擎
並採用第三方庫SDK
目前僅支持在Windows64位環境下編譯，如果要適配其他操作系統，
自行替換第三方庫powervr-sdk的其他系統版本即可。
代碼倉庫地址：
https://github.com/cpuimage/TinyText
示例效果圖如下:
編譯環境可以參閱
推薦一個可參閱學習的項目:
深入字體渲染之抗鋸齒
當然有繪製渲染，就肯定存在抗鋸齒的問題。
抗鋸齒有好幾種方案和思路。
有兩種主流的演算法:
-
Signed distance fields 有向距離場
關於距離場的演算法知識就不展開細說了，
大伙可以參閱這個鏈接瞭解一下 https://zhuanlan.zhihu.com/p/26217154
基於距離場演算法做抗鋸齒有個弊端，因為距離是有強弱的，
如果距離場設置的半徑過大，字體會呈現得過渡平滑，
細節丟失，換句話說全是鈍角沒有銳角，會模糊失真。
但如果設置的半徑過小，就沒有抗鋸齒的效果，
所以採用距離場是需要進行參數適配的。
看圖自行感受一下：
-
Vector textures 矢量紋理
思路是基於貝塞爾曲線進行繪製。
簡單地講就是將文字信息轉為svg描述格式，
然後進行光柵化繪製。
好處自然就是矢量化無損。
看圖自行感受一下：
文字渲染如果細講的話，很難三言兩句就講明白的。
所以博主這裡為大家提供一些參考資料：
-
GPU text rendering with vector textures https://wdobbie.com/post/gpu-text-rendering-with-vector-textures/
-
Korok字體系統設計 https://zhuanlan.zhihu.com/p/36553076
-
Font Rendering is Getting Interesting https://aras-p.info/blog/2017/02/15/Font-Rendering-is-Getting-Interesting/
-
Drawing Text with Signed Distance Fields in Mapbox GL https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817
-
Techniques For Rendering Text With Webgl https://css-tricks.com/techniques-for-rendering-text-with-webgl/
-
Rendering Text in Metal with Signed-Distance Fields https://metalbyexample.com/rendering-text-in-metal-with-signed-distance-fields/
-
sdf-antialiasing https://drewcassidy.me/2020/06/26/sdf-antialiasing/
-
Font Bitmap vs SDF https://www.shadertoy.com/view/llK3Wm
以上，權當拋磚引玉之用。
授人以魚不如授人以漁。
2020年，希望疫情早點結束，大家恢復正常的工作和生活。
世界和平，人們皆友愛。
若有其他相關問題或者需求也可以郵件聯繫俺探討。
郵箱地址是:
