深度剖析!浏览器字体渲染的秘密.pdfVIP

深度剖析 ！浏览器字体渲染的秘密 说到web性能 ，前端工程师很自然地反应 yahoo 的30+条优化规则。这些规则可以将网页加载从原 来的几秒甚至十几秒较少到3s甚至1s以内。当一个完整界面展现在用户眼前时 ，内容就通过不同的 字体、图片以及多媒体传达给用户。使用户在1s内看到网页和使用户留在网页上几分钟甚至几十分 钟同样重要。字体作为内容承载信息的重要部分 ，若使用不“适当”的字体或者字体由于渲染等缘故 对用户不友好 ，则会 （有可能 ）造成不必要的用户流失。本文介绍浏览器的字体渲染 ，希望还未接 触字体渲染的同事能通过本文对字体渲染有所了解。 首先看下不同浏览器下的截图: 很明显地看出 ，Chro me35截图中的非横竖笔画较IE11和Firef ox30截图中的有明显的锯齿。 理想的字体其边缘过渡平滑 ，而在屏幕上显示时 ，需要将字体栅格化(rast erizat io n)为一个个像素点 。采用黑白(bla k and w hit e)渲染无法体现字体的细节之处 ，会造成了边缘呈现锯齿状(jagged)的不 平滑。为了解决这个问题 ，字体渲染引擎采用了以下方法进行平滑(A nt ialiasing) ：灰阶(grays ale) 渲染、亚像素(sub-pixel)渲染。 渲染方法 灰阶渲染 一种通过控制字体轮廓上像素点的亮度达到字体原始形状的方法。 亚像素渲染利用了LCD屏 （液晶屏 ）中每个像素 由R、G、B三个亚像素的颜色和亮度混合而成 一个完整像素的颜色这一原理 ，将字体轮廓上的像素点由三个亚像素体现以达到原始形状的方法。 与灰阶渲染相比 ，分辨率在垂直方向放大了三倍 ，因此渲染效果更好 ，但 所耗内存也更多。因此 在手机屏上 ，为了减少CPU开销 ，并未采用该字体渲染方法 ，而 采用的grays ale渲染。 操作系统中的渲染A PI 操作系统O S提供了支持不同的字体渲染方法的A PI。在w indows下 GDI(Graphi s Devi e Int erf a e)和Dire t Writ e ，O S X下 Q uart z 。 GDI分为GDI Grays ale和GDI ClearType。前者为灰阶渲染A PI ，后者 亚像素渲染A PI。由于GDI ClearType并未对字体进行垂直方向的平滑 ，因此当字体较大时会出现边缘不平滑的情况。为了弥 补GDI ClearType的不足 ，MS实现了Dire t Writ e A PI ，它在GDI ClearType的基础上增加了垂直方 向的平滑。 但 ！字体渲染的A PI都 由浏览器厂商自己选择的 ！ 使用同一颜色 ，感官上的颜色深浅为 ：黑白渲染grays alesub-pixel。 Chro me35/36采用的 GDI ClearType ，因此在字体较大时边缘会出现毛刺 ，而FF30采用 的Dire t Writ e则没有此类问题。如下图所示 ： 根据以上两图可以发现 ，Chro me的字体渲染效果没有Firef ox的好。为缩小Chro me与FF/IE的差异 ，一种方法 使用-webkit -t ext -st ro ke:0.5px;如果使用1px的话就有点粗了。 虽然该ha k使Chro me下字体的边缘有所光滑 ，但字体在webkit 内核浏览器中看上去“模糊”了。 常用字体在浏览器中的渲染情况 从使用Mi rosof t Yahei, Taho ma和A rial字体可以看出 ，在Chro me35中 ，由于转换成GDI Grays ale 渲染 ，4 9px的字比4 8px的边缘光滑很多。字体较大时 ，GDI Grays ale比GDI ClearType具有更好 的渲染效果。 在实际中会遇到在如Taho ma/A rial字体下17px和18px的“字重”有明显差别。这个现象涉及到字体设 计 ，简单地说就 在浏览器渲染字体之前 ，字体本身会调整字型和笔画所占像素。想了解更多细节 ，请参考a loser loo k at T rueType hint ing。 启动Chro me中的Dire t Writ e 在 hro me://f lags下启用实验性Dire