WebFont 三宗罪之二:吹毛求疵的WebFont 渲染差异

话说上次发了篇危言耸听的“WebFont 三宗罪”系列之一,今日来讲三宗罪之二:吹毛求疵的WebFont 渲染差异。为什么用上“吹毛求疵”这个修饰词呢?因为Jeff “钻研”了一番发现没有必要过于纠结于文字渲染差异这些。

在写这篇文章之前,我就感到头大了——WebFont 的文字渲染其实跟本地文字的渲染是同一原理,但对于文字渲染,虽然在过去看过N 多的文章,但让我总结一下我基本上是啥都说不出。那些如TrueType、OpenType、ClearType 等名词看后必忘,什么Windows 系统渲染方式跟Mac 系统渲染方式不同耳耳……但,为了写这篇文章,为了当一名“严谨而不严肃”的工程师,我只能硬着头皮翻阅了各大资料。当然,本文不会再过多做搬运工的工作,接下来的叙述方式让我从三个问题的角度入手,自问自答,图文并茂,阐述一下我的观点。

1、同一平台同一浏览器对于 WebFont 的渲染与本地字体的渲染有不同吗?

经过博览众文+几个截图,我武断地回答“基本没有不同”,看下面的截图,本地系统已经安装思源黑体,然后在该网页中通过开发者工具分别定义网络字体与本地字体的思源黑体(截图环境为Mac OSX 10.0 + Chrome 40):

不过Windows 下的(截图环境为Win7 + Chrome 33):

如果要“吹毛求疵”,这得扯到系统啊、浏览器啊、甚至是字体文件格式所带来的差别了——我认为不是本文的重点。

2、不同平台(操作系统、浏览器)上对于WebFont 的渲染有多大的差异?

还是上截图,事实说话,为了突出差异性,我选择了另外一个页面的悦黑字体:

具体而言,因为各种各样的因素,会导致渲染差异很大,啥锯齿啊模糊啊就是来源于此。即使是同一页面,不同字号大小也会有不同的视觉差。要是再扯下去又得复制粘贴一堆原理级的东西了,所以点到为止。

3、针对WebFont 有没有相应的样式定义代码?

(在上面两个没有质量的自问自答后,终于来到了本文的重点了)是的,有的。也许你已经看到了:

-webkit-font-smoothing:antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;

下面详细介绍下:

-webkit-font-smoothing 属性

来源:http://ued.ctrip.com/webkitcss/prop/font-smoothing.html

字体平滑,该属性定义文本的平滑属性。有关字体平滑的介绍可参考字体渲染一文。目前该属性已从W3C标准中移除,慎用!

语法

-webkit-font-smoothing: none | subpixel-antialiased | antialiased

none:不平滑,字体具有锯齿锋利边缘,适用于小像素的文本。

subpixel-antialiased:使用亚像素平滑。

antialiased:使用灰阶平滑。

是不是看到上面的“亚像素”、“灰阶”头有大了呢?如果你喜欢,这里有篇文章解释了这些名词,然后这里有个对比效果

-webkit-text-stroke 属性

复合属性。设置或检索对象中的文字描边的宽度和颜色。该属性由-webkit-text-stroke-width-webkit-text-stroke-color两个子属性组成。

语法

-webkit-text-stroke: -webkit-text-stroke-width -webkit-text-stroke-color

-webkit-text-stroke-width:设置或检索对象中的文字的描边宽度。可取小数和medium(描边宽度中等), thick(描边宽度粗), thin(描边宽度细)关键字。默认值为0。

-webkit-text-stroke-color:设置或检索对象中的文字的描边颜色。默认值为字体颜色。

-moz-osx-font-smoothing 属性

这个属性就有点奇葩了,还有osx 这个前缀的,因为只支持Mac OS 系统。

该属性与-webkit-font-smoothing 属性类似,但取值完全不同,下面同一行效果是等同的:

-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: subpixel-antialiased;-moz-osx-font-smoothing: auto;

其实第2 个问题可以结合第3 个问题来回答,除了说不同的字体格式导致不同,还有样式定义的浏览器兼容问题。

后记

先再讲讲“吹毛求疵”,不同人有不同的要求——于己或于他人。对于WebFont 的渲染差异,我认为最好持以下观点:要么不用,要用就得接受这些浏览器差异,目前 CSS 所能做只能算是不痛不痒的微调。

最后,写WebFont 三宗罪的起因是在面试的时候被面试官问及webfont 的缺点时候,回答了些不痛不痒的东西,差点被面试官鄙视。学到一点是,逆向思维也很重要,过去常常去尝试那些看起来炫酷的效果,但有时候不会去细想炫酷背后可能的缺点。回来查阅了些资料,汇成了这两篇文章——恩,希望不是亡羊补牢。

PS:本三宗罪没有第三篇,但你也可以去想想,之三应该是什么?

参考文章:

http://www.jianshu.com/p/8414b96549e3

http://www.zhihu.com/question/20367702

http://segmentfault.com/q/1010000000407231

http://ued.ctrip.com/blog/?p=3665

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

《写给大家看的设计书》摘要与总结

该书适合完全没有设计背景,或在设计方面没有经过正规培训的人。 该书的描述浅显易懂,并且配有很多插图来做描述的说明。阅读起来觉得很轻松。

8530
来自专栏MixLab科技+设计实验室

从线条艺术到DIY实现一个网状体Net的js库

今天无意中看到一个可视化作品: WHAT MADE ME? INTERACTIVE PUBLIC INSTALLATION Most Original Exh...

32760
来自专栏腾讯社交用户体验设计

H5动效的常见制作手法 - 腾讯ISUX

71920
来自专栏编程

采用DIV+CSS布局对SEO优化有何好处?

DIV+CSS布局,页面代码精简,这一点对XHTML有所了解的都知道。代码精简所带来SEO优化直接好处有两点:一是提高spider爬行效率,能在最短的时间内爬完...

21160
来自专栏腾讯社交用户体验设计

如何打造一个高效适配的H5

23340
来自专栏大数据钻研

HTML5游戏前端开发【秘籍】

QQ空间Android版4.2和4.5上线的玩吧游戏“空间疯狂套牛”是一款使用HTML5开发出的手机游戏,虽然还有很多不足,但其中使用的一些技术与技巧还是很有...

50070
来自专栏腾讯社交用户体验设计

高清ICON SVG解决方案(上) - 腾讯ISUX

36940
来自专栏Coco的专栏

两行 CSS 代码实现图片任意颜色赋色技术

21230
来自专栏编程

Web前端开发的四个阶段

第一阶段:HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终...

21250
来自专栏前端小作坊

中文排版二三事

前段时间一直在折腾中文排版相关的事情,自认为结果还算不错。故开源之,即是Entry.css。这是一个可配置的、更适合阅读的中文文章样式库,可以用来快速搭建中文博...

10210

扫码关注云+社区

领取腾讯云代金券