作者mayuyu ((・ω・)ノ)
看板Browsers
标题[情报] Firefox和Chrome的字体渲染效果
时间Mon Feb 2 23:14:53 2015
先放几张字体渲染效果
图(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做文字削边的修正
[
[email protected]]
ClipBoxFix=1
加了这个参数以後，网址列和标签页削头的现象就修正了，
但是我发现在某些网页上，会变成文字的底端有轻微的削边现象。
4. BBSFox里移动游标的时候页面更新会产生字体剧烈抖动的现象。
同时版面显示，左右会稍微的扩大。
尤其是在BBSFox底下，OMTC + skia/cairo + Mactype更容易发生闪退的现象，
有时候刚开启Fx，打开BBSFox滑没几下，Fx就瞬间闪退了Orz
所以虽然真的很好看，我用一用还是换回原本的DirectWrite渲染xD
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 61.219.36.31
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Browsers/M.1422890095.A.BD3.html
1F：推 abccbaandy: 借个标题问问，如果网页有指定字型，替换好像就会失效 02/02 23:37
2F：→ abccbaandy: 难道要一个个字型加入？ 02/02 23:37
3F：→ mayuyu: t7yang大的样式已经将中文网页常见的字型都写好了 02/02 23:51
4F：→ mayuyu: 如果网站指定的字型在这些预设的字型之外 02/02 23:51
5F：→ mayuyu: 而你又想强制替换的话 确实是要手动加入没错 02/02 23:51
6F：→ mayuyu: 例如pocket使用的衬线字体我就觉得不好读 02/02 23:51
7F：→ mayuyu: 所以就手动把pocket用的chaparral-pro给换掉 02/02 23:52
8F：→ mayuyu: 有别种写法可以强制替换所有字型 可是这种无条件替换法 02/02 23:54
9F：→ mayuyu: 反而会造成更多的问题 所以还是用t7yang大的样式比较好 02/02 23:54
10F：→ mayuyu: 因为要贴图又打开Mactype 结果刚刚推到一半 Fx又闪退了Orz 02/02 23:54
11F：推 Wcw5504: FX到36也要支援unicode-range了 以後写CSS会比较方便 02/03 00:11
12F：→ Triedge: mayuyu桑请问一下你这字型有分字重吗，还是单一款式@@? 02/03 00:28
13F：→ t7yang: 楼楼上说的要是成真的，我就被感动到了（泪 02/03 01:35
14F：→ t7yang: 那个问题在bugzilla都不知道摆了多久了 囧兴 02/03 01:35
15F：推 t7yang: 这篇文章大概要仔细读一下，应该会获得一些新的资讯 02/03 01:39
16F：→ t7yang: 尤其是Chrome的部分。倒是我比较在意的是 FX 成像上的延迟 02/03 01:39
17F：→ t7yang: 就是之前我一直反覆提到的，以Gmail作为例子，只要卷动 02/03 01:40
18F：→ t7yang: 卷轴文字就失去强化成像的效果，要等个1秒左右才会恢复 02/03 01:41
19F：→ t7yang: 这点也很烦人，不晓得mayuyu大有没有遭遇这样的情况 02/03 01:41
20F：推 abccbaandy: 还是有那种排除特定字型不要换的？会出问题是好像都是 02/03 02:48
21F：→ abccbaandy: icon font？ 02/03 02:48
22F：推 sziwu1100: 我是用stylish 基本上觉得GC的效果比FF漂亮 02/03 06:32
@Wcw5504 终於要支援了，这样真的方便很多。
@Triedge 你是说图中使用的明兰秀月吗？有W4和W7两个字重。
范例图
http://i.imgur.com/I1K30mQ.png
图(1920x1080)不能放大缩小要1：1(100%)显示才不会模糊失真
@t7yang 在之前的Fx版本我也有遇过这个情况，
不过不是在Gmail遇到的而是在K岛上，
拉动卷轴後要等一段时间渲染才会加上，
但是这个问题後来就自然消失了，我猜可能是
1.Fx更新修好了这个bug
2.我更新了显示卡驱动程式到最新（我是用intel内显）
3.可能我之前用某个css样式会造成硬体渲染延迟？
4.和某个我後来停用的扩展冲突？
5.我一直开着Mactype不知道有没有影响？
你用的显示卡和驱动是哪一张？可以试试看更新驱动到最新，
或者是开一个全新profile，看看在没有css或扩展的干扰下
还会不会出现这个问题。
还有虽然我目前在一般网页上没有遇到渲染延迟的现象，
但是在BBSFox底下还是会看到这个问题，
当游标快速移动的时候会看到字体轻微的抖动。
ettoolong大好像有提过这个bug，这个问题可能问他会比较清楚。
@abccbaandy 可以排除特定字体不要换，但就是因为这样很麻烦，
同样要手动一个一个加入例外，而且会越加越多样式变得超烦。
@sziwu1100 css阴影效果可能差不多，只是Fx的强度一下子
就跳了一级，没有接近Chrome0.001em的那个强度，
所以不上不下的有点尴尬。
至於DirectWrite硬体加速渲染的效果，由於Fx可调整参数，
所以弹性比较大。
但是Chrome的字都比较锐利一点，不只字，从以前我就觉得
Chrome的图形也比较锐利，看看Fx用上高品质缩放之後会不会追上，
不过我觉得Chrome那个锐利是额外增强的，原本不应该会那麽锐利。
我昨晚因为时间太晚了没打完，而且文章太长自己都不想看xD
我後面是要提供我使用的字型和设定，还有Mactype的设定档。
我後来并没有用Mactype来渲染Fx，还是用回DirectWrite，
不过因为0.015em会太模糊，所以我把阴影样式改成
text-shadow: 0 0 0.5px rgba(0,0,0,0.5);
（调0.21px和0.5px二个数值效果都一样）
我反覆抓图下来直接切换比较，
在我的系统上这个数值会让Fx接近Chrome0.001em的清晰程度，
虽然还是Chrome比较锐利一点，但是Fx的线条比较紮实，
Chrome细字的线条还是有点发虚，至於粗细的话两者就几乎一样。
而硬体加速渲染的设定全部都是预设值，
我只有修改了
gfx.font_rendering.cleartype_params.rendering_mode
这一项调整为 5 也就是不管字型大小全部用Natural Symmetric抗锯齿
这项不调整用预设值的话，部分英文字体小字号会改用GDI Classic抗锯齿，
看起来会变得很难看。
其他全部都是预设值
gfx.font_rendering.cleartype_params.gamma -1
数值越低字体越粗，但是看起来笔画会黏成一团
gfx.font_rendering.cleartype_params.enhanced_contrast -1
数值越高字体越黑，但是边缘越破碎
gfx.font_rendering.cleartype_params.cleartype_level -1
数值越高次像素渲染越强，但是边缘会溢色
gfx.font_rendering.cleartype_params.pixel_structure -1
一般都是RGB
gfx.use_text_smoothing_setting false
在OS X底下才有用
gfx.font_rendering.cleartype.always_use_for_content false
在Windows XP底下才有用
gfx.font_rendering.directwrite.enabled false
在关闭硬体加速的情况下，仍然可以使用DirectWrite
如果改变了这些硬体设定，同时也要修改上面的阴影样式数值，
才能让Fx看起来类似Chrome。
在Windows 7底下用Android虚拟机输出
http://i.imgur.com/hm2nwya.png
强烈对比之下Windows 7的cleartype真是悲剧xD
所以後来看小说杂志我都乾脆切到Android来看了。
※ 编辑: mayuyu (61.219.36.56), 02/03/2015 06:59:06
24F：推 sate5232: 有没有标点符号在中间而非在下面的推荐字体? 02/03 10:58
25F：→ sate5232: 在底下的一直都不太习惯，所以我现在还在用iLiHei-FA 02/03 10:59
26F：推 kaoh08: 花在搞这些东西的时间 换成时薪都可以加钱买台macbook了 02/03 11:15
27F：推 sziwu1100: 楼上 还好吧 只是按按键改点设定而已 不花多少时间呀 02/03 11:54
28F：推 ettoolong: 这篇很有用耶, 可是东西好多, 我要研究一下. 谢谢分享. 02/03 12:24
29F：推 karst10607: 太复杂啦… 有没有简单无痛教学设定 02/03 17:52
30F：→ Triedge: 了解了，谢谢mayuyu桑 <3 02/03 19:33
31F：→ Triedge: 无痛教学搜寻ma桑的文章就有喽，整个很实用! 02/03 19:48
32F：推 Kreen: 推～～ 02/03 19:57
33F：→ Wcw5504: 思源黑体标点就是在中间了 02/04 02:10
34F：→ sate5232: 思源体我弄起来连微软正黑都比她好看... 02/04 09:08
35F：推 sziwu1100: sate大 微软正黑体就可以了吧 用stylish效果也不差 02/04 10:44
38F：推 mstar: 个人喜欢「华康中黑体-UN」，是华康三款 unicode 字型之一 02/04 12:01
39F：→ mstar: 不过不是免费的 02/04 12:02
40F：→ mayuyu: 抱歉我这几天比较忙 懒人包我之後再放上来 02/04 16:10
41F：→ mayuyu: 标点符号在中间的字型可以自己替换 例如FontCreator 02/04 16:10
42F：→ mayuyu: 只要改标点符号那几个字元拿别的在中间的字型 02/04 16:10
43F：→ mayuyu: 来替换就可以了 像明兰有一些字的旧字体写法 02/04 16:10
44F：→ mayuyu: 看起来可能会不习惯 也是替换掉那几个字就可以了 02/04 16:11
45F：→ mayuyu: sziwu1100的stylish渲染蛮好看的 可以分享你的样式吗？ 02/04 16:11
46F：→ sate5232: 我用DirectWrite怎麽调都还是没办法好看... 02/04 16:36
47F：→ sate5232: 最後只好继续MacType.. 02/04 16:37
48F：推 sate5232: text-shadow:多少以下不作用会不会和解析度有关? 02/04 17:15
49F：→ sate5232: 我在我15.5寸笔电上要0.36以上才会看到差异，可是就太 02/04 17:15
50F：→ sate5232: 糊了，0.35以下则跟没加一模一样 02/04 17:16
51F：→ mayuyu: @sate5232 我这里没办法让Mactype来渲染Fx 否则Fx会 02/04 18:07
52F：→ mayuyu: 当得很厉害 囧兴 调整一下alpha值试试看 alpha越低 02/04 18:07
53F：→ mayuyu: 字体颜色越淡不过雾雾的情况会减轻 看起来会比较清晰 02/04 18:07
54F：→ mayuyu: 范例图用的Mactype设定档下载 02/04 18:07
56F：→ mayuyu: 我试过调整Mactype设定DirectWrite=1或0 看起来都一样 02/04 18:07
57F：→ mayuyu: Fx都会当得很厉害 >< 不过不同系统结果可能不一样 02/04 18:08
58F：→ mayuyu: 大家自己调整看看 02/04 18:08
59F：→ mayuyu: 这个Mactype设定档字很粗 最好不要再加stylish渲染 02/04 18:08
60F：→ mayuyu: 否则比较复杂的字 密集的笔画会黏在一起 看起来反而很吃力 02/04 18:09
61F：→ mayuyu: 虽然字比较粗 不过清晰度还是比Mac差一点 02/04 18:09
62F：→ mayuyu: Mac系统预设字型很难看 不过换成明兰後还是很漂亮 02/04 18:10
64F：→ mayuyu: 的旧字形看起来不习惯 但是真的很好读 看很久也不会累 02/04 18:10