先放几张字体渲染效果
图(1920x1080)不能放大缩小要1:1(100%)显示才不会模糊失真
Firefox
http://i.imgur.com/B2JdEBX.png
Chrome
http://i.imgur.com/p0r5sxI.jpg
Firefox
http://i.imgur.com/4QI1tSt.png
Chrome
http://i.imgur.com/07DdUR4.png
Firefox
http://i.imgur.com/pLwbWtN.png
Chrome
http://i.imgur.com/f7vCBls.png
Firefox
http://i.imgur.com/dMQtuaa.png
Chrome
http://i.imgur.com/5P458zV.jpg
日文
http://i.imgur.com/701yoqG.png
简中
http://i.imgur.com/pLnHXJC.png
好读
http://i.imgur.com/p6mdoYz.png
我平常看文章的浏览器都是用火狐,因为火狐很早就支援
微软的DirectWrite字体渲染加速,在以前的时候
如果系统没有用Mactype另外做字体渲染,Chrome开起来的字体
实在不能看,文字的线条很细,颜色淡到快看不到,而且边缘支离破碎,
线条比较密集的文字就会整个黏在一起、糊成一团。
所以那时候兼顾浏览器硬件加速的效能,还要看起来轻松易读不伤眼,
我最好的选择就是用火狐来阅读文章,同时可以搭配ScrapBook来撷取网页。
后来Chrome也开始支援DirectWrite,但是早期支援的效果很差,
文字破碎得更严重,有些系统甚至会发生文字消失,接口变成一片空白的情况,
所以当时大家都是进chrome://flags,把实验性的DirectWrite功能给停用。
又过了一段时间,Chrome的DirectWrite终于到了可以正常使用的程度了,
而且默认也改成是开启的,但是很可惜Chrome没有开放参数给大家调整,
字体渲染的效果和强度都是固定的,使用者不能随自己的喜好改变。
我当时有比较了一下Fx和Chrome的渲染效果,觉得自己调整后
还是Fx看起来稍微好一点,再加上Fx有二个模拟平板触控拖曳滑动的扩展,
可以在网页上任何位置用拖曳或滚轮的方式来惯性滑动或滚动画面
(请参考#1KiIIJVN),用桌机版浏览器看Pocket、Evernote Clearly、
Instagram、Pinterest、Twitter、Facebook等网页,可以自由的拖曳滑动,
就像用手机版一样方便,再搭配Imagus图片预览扩展,鼠标光标移到图片上
就可以预览原始大图,看500px、Flickr等图片网站甚至更方便。
虽然Chrome也有类似的扩展,但是我觉得Fx版的比较好用,滑动更顺畅。
再加上FireGestures的手势操作几乎无所不能,实在太好用,
(我很少需要去点击标签页来开关分页、跳转分页,也没有按过
上下一页的按钮来前进后退,都是在原地画手势就可以完成这些操作)
所以后来仍然继续使用Fx作为主要的阅读工具。
几个星期前,我突然注意到同样开启美好的一天首页
http://skyinc.net/zh-tw/
Fx的字体渲染很惨,天气和时钟的数字边缘都是锯齿状,
可是用Chrome开同一个网页,数字的边缘却非常的平滑
http://i.imgur.com/j4E13Zq.jpg
很奇怪,看起来好像Fx的字体在这个网页上没有成功渲染,
但是Chrome也未免太平滑了吧?!
因为实在太奇怪了,所以我研究了一下,
结果发现差异是在于我使用的t7yang大写的字体替换样式
“KillSerif 明兰秀月 Style v3.0”(#1JodN9L7)
将网页常用的衬线字体替换为自己指定的无衬线字体,
让网页看起来更美观、清楚,变得更好阅读。
这个样式最后有一个为字体加上阴影(稍微加粗加黑)的效果
/* 文字阴影效果,开启后会有文字加粗的感觉,粗度建议范围0.001~0.01em */
body {
text-shadow: 0 0 0.001em;
}
我有把它打开,Chrome开启这个css渲染后,渲染效果非常强,
字体已经可以开始感觉到有一点雾雾的,但是还不到非常模糊的程度,
而且这样显示起来的效果字体边缘非常平滑
而Fx同样用0.001em,渲染效果却很微弱,
我试了调整0.001em~0.014em,看起来效果完全一样,没有变化。
但是调整到0.015em的时候,渲染效果就突然增强了,瞬间跳了一级,
字体也变得非常平滑,但是却比Chrome模糊一点,
也就是说渲染强度排起来比较的话:
Fx0.001em~0.014em < Chrome0.001em < Fx0.015em
Fx从0.014em到0.015em一下子就四舍五入跳了很大的一级,
没有像Chrome0.001em那样中间的效果。
所以我觉得很伤脑筋,Fx调0.014em效果太弱,调0.015em效果又太强。
我尝试调整Fx的about:config里面的gfx.font_rendering.cleartype.*
这一群调整字体渲染效果的设定,尝试把硬件渲染的效果改锐利一点。
然后也换过css渲染的单位,改成text-shadow: 0 0 0.21px;
但还是没有办法,一经过css渲染以后,渲染的效果还是太强,
最终显示的结果字体还是会变得雾雾的。
我已经很久没有使用Mactype来渲染Fx,一直都是用Fx的硬件加速渲染。
百般无奈之下,我只好关闭Fx的硬件加速(Direct2D),
让Fx可以使用系统上的Mactype的渲染,用Mactype来试试看
能不能取得折衷的效果。
只要在Fx的选项设定中,把“可用时开启硬件加速”这个选项取消勾选,
Mactype就可以成功渲染Fx。
但是用这个方法取消硬件加速会连OMTC图层合成加速的功能也一起失效,
也就是layers.acceleration.disabled这一项参数会被设为true。
所以我不是直接取消勾选,而是在about:config中,单独关闭Direct2D,
把gfx.direct2d.disabled设为true,重新启动Fx。
这样子就可以保留OMTC加速的功能,单独关闭Direct2D和DirectWrite。
如果成功的话,在about:Support里面会显示
“已启用 DirectWrite”false
“GPU 加速视窗”1/1 Direct3D 11 (OMTC)
“AzureCanvasBackend”skia
“AzureContentBackend”cairo
“AzureFallbackCanvasBackend”cairo
Azure图形处理引擎的接口会从Direct2D变成skia/cairo,
同时“已启用 DirectWrite”会显示false,
但是“GPU 加速视窗”会显示1/1,使用Direct3D或者是OpenGL,
如果这一项显示的是0/1 Basic (OMTC),代表OMTC加速启用失败。
使用Mactype渲染美好的一天
Firefox
http://i.imgur.com/2mdCt4K.jpg
看起来很完美。
不过我遇到几个以前没遇过的问题:
1. 新版的Fx改用skia/cairo + OMTC后,会变得很不稳定。
我使用的是pcxfirefox 35.0.1 x64的版本,
切换标签页的时候常常会发生卡住的现象,
Fx会暂时失去回应,而且时常发生闪退,程式会自己关闭。
我翻了一下bugzilla,目前已知skia/cairo在双GPU上会发生问题,
同时也已经在37a版修复这个bug,可是我是单GPU 囧
或者是我使用的x64 + Mactype渲染组合的问题,
可能x86不会发生这个现象,我没有测试。
2. 我将字体改为“明兰”和“秀月”,结果Fx启动的时候,
不会马上加载无衬线的明兰字体,英数字会变成有衬线,
要等经过120秒以后,英数字才会变回无衬线。
解决的方法:
将gfx.font_loader.delay的数值由120000改为1000(一秒钟)
你可以自己修改延迟的时间长短。
3. 经过Mactype渲染后,网址列和标签页的文字会被削头。
文字的顶端会有一部份不见,看起来好像被切掉一样。
解决的方法:
Mactype新版有为这个问题提供一个参数作修正,
把下面的参数加到Mactype的ini设定里:
;指定对Firefox.exe做文字削边的修正
[Experimental@Firefox.exe]
ClipBoxFix=1
加了这个参数以后,网址列和标签页削头的现象就修正了,
但是我发现在某些网页上,会变成文字的底端有轻微的削边现象。
4. BBSFox里移动光标的时候页面更新会产生字体剧烈抖动的现象。
同时版面显示,左右会稍微的扩大。
尤其是在BBSFox底下,OMTC + skia/cairo + Mactype更容易发生闪退的现象,
有时候刚开启Fx,打开BBSFox滑没几下,Fx就瞬间闪退了Orz
所以虽然真的很好看,我用一用还是换回原本的DirectWrite渲染xD