文字渲染一探

引子

近一个月都在与字体打交道，查阅了很多资料。

发现国内不多有这方面的一些资源，有点奇怪。

故此，想稍微梳理一下这方面的一些资料以及信息，方便对这方面感兴趣的朋友参阅。

 

文字渲染的组成

文字渲染严格意义上来讲包含几个主要的核心模块，分别是：

1.字体光栅化 FreeType

它是一个软件字体引擎，它被设计成小巧、高效、可高度定制和可移植，同时可以生成高质量的输出(字形图像)。它还能够用于图形库、显示服务器、字体转换工具、文本图像生成工具和许多其余产品。

 

2.字体适配 Fontconfig

主要用于配置、定制管理系统里的字体，简单的说就是经过给出的字体信息，例如粗体，斜体等，找到现有系统中最匹配的这些特征的字体文件。

 

3.Unicode文本双向算法 FriBidi

主要用来转换不一样语系中存在的文本方向问题，例如右向左的文本， 翻转后为左向右顺序的文本。

 

4.文字塑形HarfBuzz

HarfBuzz是一种文字塑形布局引擎(text shaping library)，它主要将Unicode转换为格式正确且位置正确的字形输出。

简单地说就是用于适配全世界不一样语言的文字编码布局。

另外一个很是知名库是ICU,而HarfBuzz的实现中将其做为第三方库引入

 

5.布局渲染Cairo或Skia Graphics Library

当你拿到字体字形的数据以后，毫无疑问，

确定是须要一个布局渲染引擎把这些文字在对应的位置上画出来。

 

在手机或者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使用的libtxt布局引擎也是基于Minikin。

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

这是博主将谷歌开源的一个物理引擎Tiny Differentiable Simulator中的文字绘制模块单独提取出来，

并采用第三方库SDKpowervr-sdk-tools进行编译开发，

目前仅支持在Windows64位环境下编译，若是要适配其余操做系统，

自行替换第三方库powervr-sdk的其余系统版本便可。

代码仓库地址：

https://github.com/cpuimage/TinyText

示例效果图以下:

编译环境能够参阅Windows下C,C++开发环境搭建指南

 

推荐一个可参阅学习的项目:

freetype-gl 这是一个很是值得参阅学习的项目，字体渲染涉及到的基本算法，都有了，并且仍是纯C的代码。

 

深刻字体渲染之抗锯齿

固然有绘制渲染，就确定存在抗锯齿的问题。

抗锯齿有好几种方案和思路。

有两种主流的算法:

1. Signed distance fields 有向距离场

关于距离场的算法知识就不展开细说了，

大伙能够参阅这个连接了解一下 https://zhuanlan.zhihu.com/p/26217154

基于距离场算法作抗锯齿有个弊端，由于距离是有强弱的，

若是距离场设置的半径过大，字体会呈现得过渡平滑，

细节丢失，换句话说全是钝角没有锐角，会模糊失真。

但若是设置的半径太小，就没有抗锯齿的效果，

因此采用距离场是须要进行参数适配的。

看图自行感觉一下：

 

 

2. Vector textures 矢量纹理

思路是基于贝塞尔曲线进行绘制。

简单地讲就是将文字信息转为svg描述格式，

而后进行光栅化绘制。

好处天然就是矢量化无损。

看图自行感觉一下：

 

 

文字渲染若是细讲的话，很难三言两句就讲明白的。

 

因此博主这里为你们提供一些参考资料：

1. GPU text rendering with vector textures https://wdobbie.com/post/gpu-text-rendering-with-vector-textures/

2. Korok字体系统设计 https://zhuanlan.zhihu.com/p/36553076

3. Font Rendering is Getting Interesting https://aras-p.info/blog/2017/02/15/Font-Rendering-is-Getting-Interesting/

4. Drawing Text with Signed Distance Fields in Mapbox GL https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817

5. Techniques For Rendering Text With Webgl https://css-tricks.com/techniques-for-rendering-text-with-webgl/

6. Rendering Text in Metal with Signed-Distance Fields https://metalbyexample.com/rendering-text-in-metal-with-signed-distance-fields/

7. sdf-antialiasing https://drewcassidy.me/2020/06/26/sdf-antialiasing/

8. Font Bitmap vs SDF https://www.shadertoy.com/view/llK3Wm

9. 2D distance functions https://www.iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm

 

以上，权当抛砖引玉之用。

授人以鱼不如授人以渔。

 

2020年，但愿疫情早点结束，你们恢复正常的工做和生活。

世界和平，人们皆友爱。

 

如有其余相关问题或者需求也能够邮件联系俺探讨。

邮箱地址是: gaozhihan@vip.qq.com