深度剖析!浏览器字体渲染的秘密 - 优设网 - UISDC

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

2014/07/29 13180评论区

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

说到web性能,前端工程师很自然地反应是yahoo的30+条优化规则。这些规则可以将网页加载从原来的几秒甚至十几秒较少到3s甚至1s以内。当一个完整界面展现在用户眼前时,内容就通过不同的字体、图片以及多媒体传达给用户。使用户在1s内看到网页和使用户留在网页上几分钟甚至几十分钟同样重要。字体作为内容承载信息的重要部分,若使用不“适当”的字体或者字体由于渲染等缘故对用户不友好,则会(有可能)造成不必要的用户流失。本文介绍浏览器的字体渲染,希望还未接触字体渲染的同事能通过本文对字体渲染有所了解。

首先看下不同浏览器下的截图:

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

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

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

很明显地看出,Chrome35截图中的非横竖笔画较IE11和Firefox30截图中的有明显的锯齿。

理想的字体其边缘过渡平滑,而在屏幕上显示时,需要将字体栅格化(rasterization)为一个个像素点。采用黑白(black and white)渲染无法体现字体的细节之处,会造成了边缘呈现锯齿状(jagged)的不平滑。为了解决这个问题,字体渲染引擎采用了以下方法进行平滑(Antialiasing):灰阶(grayscale)渲染、亚像素(sub-pixel)渲染。

渲染方法

灰阶渲染是一种通过控制字体轮廓上像素点的亮度达到字体原始形状的方法。

亚像素渲染利用了LCD屏(液晶屏)中每个像素是由R、G、B三个亚像素的颜色和亮度混合而成一个完整像素的颜色这一原理,将字体轮廓上的像素点由三个亚像素体现以达到原始形状的方法。与灰阶渲染相比,分辨率在垂直方向放大了三倍,因此渲染效果更好,但是所耗内存也更多。因此在手机屏上,为了减少CPU开销,并未采用该字体渲染方法,而是采用的grayscale渲染。

操作系统中的渲染API

操作系统OS提供了支持不同的字体渲染方法的API。在windows下是GDI(Graphics Device Interface)和DirectWrite,OS X下是Quartz。

GDI分为GDI Grayscale和GDI ClearType。前者为灰阶渲染API,后者是亚像素渲染API。由于GDI ClearType并未对字体进行垂直方向的平滑,因此当字体较大时会出现边缘不平滑的情况。为了弥补GDI ClearType的不足,MS实现了DirectWrite API,它在GDI ClearType的基础上增加了垂直方向的平滑。
但是!字体渲染的API都是由浏览器厂商自己选择的!

使用同一颜色,感官上的颜色深浅为:黑白渲染>grayscale>sub-pixel。

Chrome35/36采用的是GDI ClearType,因此在字体较大时边缘会出现毛刺,而FF30采用的DirectWrite则没有此类问题。如下图所示:

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

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

根据以上两图可以发现,Chrome的字体渲染效果没有Firefox的好。为缩小Chrome与FF/IE的差异,一种方法是使用-webkit-text-stroke:0.5px;如果使用1px的话就有点粗了。

虽然该hack使Chrome下字体的边缘有所光滑,但字体在webkit内核浏览器中看上去“模糊”了。

常用字体在浏览器中的渲染情况

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

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

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

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

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

从使用Microsoft Yahei, Tahoma和Arial字体可以看出,在Chrome35中,由于转换成GDI Grayscale渲染,49px的字比48px的边缘光滑很多。字体较大时,GDI Grayscale比GDI ClearType具有更好的渲染效果。

在实际中会遇到在如Tahoma/Arial字体下17px和18px的“字重”有明显差别。这个现象涉及到字体设计,简单地说就是在浏览器渲染字体之前,字体本身会调整字型和笔画所占像素。想了解更多细节,请参考a closer look at TrueType hinting。

启动Chrome中的DirectWrite

在chrome://flags下启用实验性DirectWrite字体渲染系统:#enable-direct-write会使48px以下的字体均为sub-pixel渲染。仅适用于测试环境?。ㄐ柚仄鬋hrome)

Chrome37 beta将该特性移除实验特性,并将在Chrome37中实现在windows下使用DirectWrite API对字体渲染,相信在Chrome37中以上提到的浏览器字体渲染差异会得到解决。

字体格式在不同浏览器下的渲染

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

font-smoothing: subpixel-antialiased | antialiased;
对应为sub-pixel和grayscale。
已废止!

font-weight: bold;
Chrome35, IE7/8:与normal字体渲染一致(包括数字和字母);
IE9+/FF30:grayscale,部分简单中文字体保持原有渲染。

font-style:italic;
Chrome35, IE7/8:与normal字体渲染保持一致;
IE9+/FF30:sub-pixel渲染。

opacity: 属性值<1
Chrome35:sub-pixel渲染的字体“降级”为grayscale渲染;
IE9+/FF30:保持不变

transform 2D

transform: rotate(n);
n=90*k deg(k=整数), 保持未旋转的字体渲染;
others,sub-pixel渲染。Chrome35在48px+为grayscale渲染。
transform: scale(x,y); 与字体大小m有关。以simsun为例,具体如下:

Chrome35:
x*y*m<12, Chrome35 sub-pixel渲染;
12<x*y*m<=48*48=2304 sub-pixel渲染; x*y*m>2304 grayscale渲染,12px-24px存在一定范围的黑白渲染(tahoma是12px-16px)。

FF30、IE9+:
m*m*n<=99*99=9801 sub-pixel渲染; m*m*n>9801 grayscale渲染。

transform: skew(n);
n=90*k deg(k为整数), 保持未倾斜的字体渲染;
others, sub-pixel渲染。Chrome35在49px+为grayscale渲染,IE9+, FF30在100px+为grayscale渲染。

transform 2D & transition

运动中:以12px为例: 在Chrome35和FF30下,运动中的字体均是grayscale渲染;
运动结束:Chrome35, FF30, IE9+均为sub-pixel渲染。
从运动开始到运动结束产生了两次渲染变化(sub-pixel到grayscale,grayscale到sub-pixel)会出现“闪现”的现象。

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

Transform 3D

当元素进入GPU中渲染时,在Chrome35+中的字体为grayscale渲染,IE11和FF30保持sub-pixel渲染不变。若transform值函数(如translate3d(), scale(), rotate()等)中的参数为非整数,会导致字体模糊。在使用iScroll模拟滚动的项目中会出现字体模糊。以下是对该问题的一个还原:

-webkit-transform: translate3d(1.5px, 1.5px,0);

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

-webkit-transform: translate3d(1px, 1px,0);

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

Chrome 36中使用transform不需要-webkit-前缀了!

为了防止以上模糊情况的出现,可以通过JS中的Math.round()/Math.ceil()/Math.floor()等函数使其为整数。

当加入perspective()值时,Firefox30渲染又有所不同。

transform: perspective(1px) translate3d(1.5px, 1.5px,0);在FF30中作用的元素为grayscale渲染。

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

transform: perspective(1px) translate3d(1px, 1px,0); 在FF30中作用的元素为sub-pixel渲染

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

E11均为sub-pixel渲染。

此情况下运用opacity<1的声明,IE10+为grayscale。

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

Chrome transform: perspective()对文档后面元素的影响

Chrome35+,当transform中声明有perspective()时,若文档后面声明transform的元素进入该声明作用的元素的layer-borders的区域时,仍然会受到该声明的影响。声明作用元素的溢出部分同样会对后面元素造成影响。合成渲染层内部文字进入GPU渲染。

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

启动Show composited layer borders,在Chrome中测试的结果截图为:

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

总结

字体渲染与操作系统、浏览器、字体格式以及CSS属性有关。本文重点罗列了一些在Windows Chrome中字体渲染与FF/IE的差异和对应缓解/解决问题的方案。Chrome在字体渲染上目前落后于IE/FF,但之前官方博客称Chrome 37将实现在windows下使用DirectWrite API,Chrome在字体渲染方面将赶上IE/FF等浏览器,以上的差异性也将减小甚至消失。

更多字体相关文章:
《网站字体渲染!聊聊各浏览器下字体排版一致的问题》
《推荐!WEB中文字体应用指南》
《网页设计新趋势:我所知道的关于WEB字体的一切》

Everthing-about-webfont-1

 

原文地址:携程UED
作者:fhz
审阅:小志

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网ag亚游集团“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。
设计微博:拥有粉丝量74万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.www.offshoring-digest.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.offshoring-digest.com/font-rendering-analysis

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

转场动效 设计师 扁平化设计 交互设计师 优设专访 界面设计 优设大课堂 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 AI教程 设计理论 设计师专访 神器下载 字体下载 平面设计 设计趋势 psd下载 用户体验设计 海报设计 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里