【浏览器渲染】浏览器中的文字渲染过程

渲染过程

解码

要解码首先要知道用何种编码方式去解码。浏览器接收网页内容后，根据如下规则匹配编码方式：

1. Web 服务器返回的 HTTP 头中的 Content-Type: text/html; charset=“”的编码
2. 网页本身 meta header 中的 charset 部分
3. 浏览器菜单里一般允许用户强制指定编码
4. 部分浏览器 (比如 Firefox) 可以选择编码自动检测功能，使用基于统计的方法判断未定编码。

分段

编码方式确定后，网页的内容就被转化为 Unicode 字符了，分段的过程就是将文本分为由不同语言组成的小段。

排版引擎/文字渲染引擎

不同操作系统有自己的文字渲染引擎。

苹果公司更专注于还原字形设计的本来面貌，使字形更优雅、平滑。而微软则更倾向字体的清晰，可读性。

浏览器会有布局引擎，它来决定是怎样用 html 结构，css 样式表来渲染网页。但是对于字形渲染，绝大部分还是由操作系统的文本渲染引擎来控制的，这就很好的解释了为什么同样的浏览器，在不同的操作系统下有不同的字形表现。

光栅化

当确定了编码、字体类型、排版引擎、浏览器后，就要进行光栅化过程了，光栅化是将文字从一个向量表示（比如一个 TrueType 字体）转化到光栅或者位图表示的过程。在这个过程中往往涉及到一些抗锯齿技术来使得屏幕上的字体更加平滑易读，这也经常会涉及到“字体微调(font hinting)”技术。

渲染

当确定了字体以后，就可以将文本、字体等等参数一起交给具体的排版引擎，生成字形和位置，然后根据不同的平台调用不同的字体 rasterizer 将字形转换成最后显示在屏幕上的图案，一般浏览器都会选择平台原生的 rasterizer，比如 Mac OS X 下用 Core Graphics，Linux/X11 下用 FreeType，Windows 下用 GDI/DirectWrite 等等。各个浏览器的差异主要来自使用的排版引擎可能对不同的语言支持有差异，调用 rasterizer 使用的参数可能有差异 (比如是否启用 subpixel rendering、使用的 hinting 级别等等)，但在同一个操作系统下的效果差别不会很大。

影响浏览器字体显示的因素

1. 字体类型
2. 排版引擎
3. 浏览器

参考

网站字体渲染过程浏览器如何渲染文本