[情报] Firefox和Chrome的字体渲染效果

楼主: mayuyu ((・ω・)ノ)   2015-02-02 23:14:53
先放几张字体渲染效果
图(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
作者: abccbaandy (敏)   2015-02-02 23:37:00
借个标题问问,如果网页有指定字型,替换好像就会失效难道要一个个字型加入?
楼主: mayuyu ((・ω・)ノ)   2015-02-02 23:51:00
t7yang大的样式已经将中文网页常见的字型都写好了如果网站指定的字型在这些默认的字型之外而你又想强制替换的话 确实是要手动加入没错例如pocket使用的衬线字体我就觉得不好读所以就手动把pocket用的chaparral-pro给换掉有别种写法可以强制替换所有字型 可是这种无条件替换法反而会造成更多的问题 所以还是用t7yang大的样式比较好因为要贴图又打开Mactype 结果刚刚推到一半 Fx又闪退了Orz
作者: Wcw5504 (五月雨)   2015-02-03 00:11:00
FX到36也要支援unicode-range了 以后写CSS会比较方便
作者: Triedge (...喔...嘎...)   2015-02-03 00:28:00
mayuyu桑请问一下你这字型有分字重吗,还是单一款式@@?
作者: t7yang (t7: 我认为这是一种背叛)   2015-02-03 01:35:00
楼楼上说的要是成真的,我就被感动到了(泪那个问题在bugzilla都不知道摆了多久了 囧兴这篇文章大概要仔细读一下,应该会获得一些新的资讯尤其是Chrome的部分。倒是我比较在意的是 FX 成像上的延迟就是之前我一直反复提到的,以Gmail作为例子,只要卷动卷轴文字就失去强化成像的效果,要等个1秒左右才会恢复这点也很烦人,不晓得mayuyu大有没有遭遇这样的情况
作者: abccbaandy (敏)   2015-02-03 02:48:00
还是有那种排除特定字型不要换的?会出问题是好像都是icon font?
作者: sziwu1100 (田桥仔)   2015-02-03 06:32:00
我是用stylish 基本上觉得GC的效果比FF漂亮http://drp.io/nqS/+ 使用GC看yahoo网页的效果
作者: sate5232 (Hao)   2015-02-03 10:58:00
有没有标点符号在中间而非在下面的推荐字体?在底下的一直都不太习惯,所以我现在还在用iLiHei-FA
作者: kaoh08 (AIR -the 1000th summer-)   2015-02-03 11:15:00
花在搞这些东西的时间 换成时薪都可以加钱买台macbook了
作者: sziwu1100 (田桥仔)   2015-02-03 11:54:00
楼上 还好吧 只是按按键改点设定而已 不花多少时间呀
作者: ettoolong (ettoolong)   2015-02-03 12:24:00
这篇很有用耶, 可是东西好多, 我要研究一下. 谢谢分享.
作者: karst10607 (谁可以协助我开板?)   2015-02-03 17:52:00
太复杂啦… 有没有简单无痛教学设定
作者: Triedge (...喔...嘎...)   2015-02-03 19:33:00
了解了,谢谢mayuyu桑 <3无痛教学搜寻ma桑的文章就有喽,整个很实用!
作者: Kreen (每天要更優秀一點)   2015-02-03 19:57:00
推~~
作者: Wcw5504 (五月雨)   2015-02-04 02:10:00
思源黑体标点就是在中间了
作者: sate5232 (Hao)   2015-02-04 09:08:00
思源体我弄起来连微软正黑都比她好看...
作者: sziwu1100 (田桥仔)   2015-02-04 10:44:00
sate大 微软正黑体就可以了吧 用stylish效果也不差http://drp.io/nvN/+ stylish使用微软正黑体http://drp.io/nvO/+ pttchrome 使用华康细黑体
作者: mstar (Wayne Su)   2015-02-04 12:01:00
个人喜欢“华康中黑体-UN”,是华康三款 unicode 字型之一不过不是免费的
楼主: mayuyu ((・ω・)ノ)   2015-02-04 16:10:00
抱歉我这几天比较忙 懒人包我之后再放上来标点符号在中间的字型可以自己替换 例如FontCreator只要改标点符号那几个字符拿别的在中间的字型来替换就可以了 像明兰有一些字的旧字体写法看起来可能会不习惯 也是替换掉那几个字就可以了sziwu1100的stylish渲染蛮好看的 可以分享你的样式吗?
作者: sate5232 (Hao)   2015-02-04 16:36:00
我用DirectWrite怎么调都还是没办法好看...最后只好继续MacType..text-shadow:多少以下不作用会不会和分辨率有关?我在我15.5吋笔电上要0.36以上才会看到差异,可是就太糊了,0.35以下则跟没加一模一样
楼主: mayuyu ((・ω・)ノ)   2015-02-04 18:07:00
@sate5232 我这里没办法让Mactype来渲染Fx 否则Fx会当得很厉害 囧兴 调整一下alpha值试试看 alpha越低字体颜色越淡不过雾雾的情况会减轻 看起来会比较清晰范例图用的Mactype设定档下载http://paste2.org/_EZAe7YsX我试过调整Mactype设定DirectWrite=1或0 看起来都一样Fx都会当得很厉害 >< 不过不同系统结果可能不一样大家自己调整看看这个Mactype设定档字很粗 最好不要再加stylish渲染否则比较复杂的字 密集的笔画会黏在一起 看起来反而很吃力虽然字比较粗 不过清晰度还是比Mac差一点Mac系统默认字型很难看 不过换成明兰后还是很漂亮http://i.imgur.com/qht2P77.png 明兰虽然有些字体的旧字形看起来不习惯 但是真的很好读 看很久也不会累

Links booklink

Contact Us: admin [ a t ] ucptt.com