作者csid (csid)
看板Browsers
标题[-Fx-] Firefox 53.0.2 字型渲染
时间Wed May 10 16:35:12 2017
在52版，我有使用KillSerif Style强化字型显示，但是升到53版後，发现一些问题：
/* 文字阴影效果，开启後会有文字加粗的感觉，粗度建议范围 0.001~0.01em */
body {
text-shadow:....
}
这段失效，阴影效果怎麽设定都不会出现，同时，如果将config内，
gfx.font_rendering.cleartype_params.rendering_mode设为5，
也就是Natural Symmetric反锯齿，页面卷动会变得较为lag，
将rendering_mode设为预设值或是取消文字阴影卷动就正常了。
这原本在52版不会如此的。
我本身使用Pcx版，为了厘清问题，所以在VM换成官版，用全新的设定档做测试，
还是一样，所以可以确定是53版本身的问题，不知道53版到底改了什麽？
想请问有没有解决的办法？
还有一个问题，不知道什麽原因，在53版全新安装Stylish，
无法新增或是网路安装任何的Style...
另外，我使用的OS是Windows 7 x64 SP1，显卡有支援D3D11。
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 220.133.149.197
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Browsers/M.1494405314.A.A6F.html
1F：→ share8426: 53真的很可怕，我还是停在52.0.2就好了哦 05/10 21:29
2F：→ share8426: Lazarus不支援，IDM不稳定，字体怪异…一堆… 05/10 21:30
3F：→ share8426: 之後还有个57，FX前途多难 05/10 21:33
4F：推 abramtw: Mactype在54beta版反而没问题 05/11 08:29
5F：推 mstar: 请爱用 ESR 版，目前是 52.1.1 05/11 10:22
6F：推 Wcw5504: 53我觉得单用-webkit-text-stroke的效果会比用text-shado 05/11 11:13
7F：→ Wcw5504: w的效果要好 後者在小字的状况下还蛮灾难的 挤成一团 05/11 11:14
8F：→ t7yang: OK，之後会替换成text-stroke 05/11 11:45
9F：推 mayuyu: 如果要用旧版 建议换成ESR频道 才能跟上安全性更新 05/11 13:33
10F：→ mayuyu: 扩展不能使用的话 建议更换扩展 或者请求扩展作者更新 05/11 13:33
11F：→ mayuyu: 浏览器有重大革新的时候总会有阵痛期 05/11 13:33
12F：→ mayuyu: GC废除NPAPI的时候也是有很重大的扩展不能继续使用 05/11 13:34
13F：→ mayuyu: 然而GC现在还是活得好好的 没有因为扩展不能使用而消失 05/11 13:34
14F：→ mayuyu: 原PO在网址列输入about:Support 05/11 13:34
15F：→ mayuyu: 检查「图形」底下「合成」「Direct2D」「DirectWrite」 05/11 13:34
16F：→ mayuyu: 这几个项目显示的状态 检查显示卡驱动程式是否相容 05/11 13:34
17F：→ mayuyu: 检查GPU子程序有没有启用 05/11 13:35
我并没启动e10s，除此之外，其他部分部分我检查过，应该是没问题的，如下：
http://i.imgur.com/CFrVDub.png
後来索性把设定档砍掉重建，就正常了，
但是text-shadow开启状态卷动顺畅度会降的问题还是存在，
字也如同上几篇文章反映的，比52版要细，稍微难看些。
-webkit-text-stroke我也试过，但是有两个问题，一是字比较小时，
有边缘渲染溢出的状况，二是反白时stroke描绘的边缘没有随着反白一起变色，
这两状况如下图：
http://i.imgur.com/bWoMIj8.png
这一样是在Natural Symmetric反锯齿状况下，字型为Noto Sans CJK TC，
我不清楚是我个人电脑的问题还是其他原因？
※ 编辑: csid (220.133.149.197), 05/11/2017 19:50:31
18F：推 Kreen: 我觉得是 Natural Symmetric 的锅，我有一台旧笔电调那个餐 05/11 20:47
19F：→ Kreen: 数以後就变 lag 了。 05/11 20:47
其实我经过交叉测试，只要是Natural Symmetric + text-shadow，顺畅度就会降，
关掉其中一个就正常了，但是这问题在52版是没有的，
本来想改用-webkit-text-stroke，但是边缘溢出在某些日文下特别严重，影响阅读。
这个在字型2017那篇好像有人提过，似乎没有解决...
※ 编辑: csid (220.133.149.197), 05/11/2017 21:03:08
20F：推 mayuyu: 字体渲染比较细的问题54版会修正 05/11 21:18
21F：→ mayuyu: Natural Symmetric的问题我没有遇到 05/11 21:18
22F：→ mayuyu: 你用预设值(-1)也会发生问题吗？ 05/11 21:18
23F：→ mayuyu: 我这里用-1预设就是Natural Symmetric 05/11 21:19
24F：→ mayuyu: 所以没有特别设置为5 在WIN10底下会有其他渲染模式 05/11 21:19
25F：→ mayuyu: 所以建议不要更动用-1就好 05/11 21:19
26F：→ mayuyu: 因为53版预设是启用GPU子程序的 05/11 21:19
27F：→ mayuyu: 但是因为你关掉e10s 所以可能会有一些预期外的问题 05/11 21:19
28F：→ mayuyu: text-stroke的溢出 是指字体有毛边的现象吗？ 05/11 21:19
29F：→ mayuyu: 如果把字体调整大一点(在Fx字型设定里把最小字体调大) 05/11 21:20
30F：→ mayuyu: 还会有毛边的现象吗？ 05/11 21:20
31F：→ mayuyu: 啊 溢出的问题 你是指字体会有分离的二重影像吗？ 05/11 21:24
32F：推 Kreen: 那一台笔电改回 -1 就好了，神奇～ 反而新的笔电改这参数也 05/11 21:46
33F：→ Kreen: 不会 lag= = 05/11 21:46
To mayuyu:对，就是分离的二重影现象，如同我上面的图，日文在特定情形下会很严重，
另外还有反白的问题如上面的图...
还有e10s我也想开启，顺畅度和没开是不能比拟的，
可是flashgot和新版的同文堂还是有些问题，在未解决之前实在没办法启用...
Natural Symmetric那部份我设回-1试试，不晓得在win7上的差异是如何？
--------------------------------
我刚刚试了一下，用-1後在小字型下英文字型变得不好看，
我记得以前好像有人提过用预设值的状况下，小字型的英文会改用GDI渲染？
※ 编辑: csid (220.133.149.197), 05/11/2017 22:00:56
34F：→ mayuyu: 分离的二重影像是DW的bug 请重新启动系统就会恢复正常 05/11 22:08
35F：→ mayuyu: text-stroke的优点是可以把字体加得非常粗而不会像 05/11 22:09
36F：→ mayuyu: text-shadow会变得模糊 字体可以保持非常锐利 05/11 22:09
37F：→ mayuyu: 但是缺点就是选取文字的时候描边的颜色无法跟着反白 05/11 22:09
38F：→ mayuyu: 可以试着调整反白的颜色让选取文字的时候看起来清楚一点 05/11 22:09
39F：→ mayuyu: 例如 05/11 22:09
40F：→ mayuyu: ::-moz-selection{background:#b3d4fd;color:#333; 05/11 22:09
41F：→ mayuyu: /*background:Highlight;color:HighlightText;*/} 05/11 22:10
42F：→ mayuyu: 不过效果可能有限 05/11 22:10
43F：推 mayuyu: 英文字型被使用GDI渲染的问题 调整下面的参数 05/11 22:13
44F：→ mayuyu: gfx.font_rendering.cleartype_params.for 05/11 22:13
45F：→ mayuyu: ce_gdi_classic_max_size 05/11 22:13
46F：→ mayuyu: 预设好像是15 改成12以下试试？ 05/11 22:13
刚刚重开机再度做测试，叠字(溢出)的问题依旧没有改善，我发现在日文下，
特别是粗体，小字型时特别严重，如下图：
http://i.imgur.com/wze8IKf.png
网址：
http://www.kisskiss.tv/kiss/diary.php
可是日文维基却没有这问题，不知道是不是win7特有的bug？
※ 编辑: csid (36.238.113.10), 05/11/2017 23:02:55
47F：推 hohiyan: 我用win10也是会有叠字的问题 05/11 23:18
48F：→ mayuyu: 重开机也没办法解决就麻烦了 那是描边的时候没有对齐 05/11 23:57
49F：→ mayuyu: 正确的位移造成的 这下子... 再重开机一次试试;; 05/11 23:58
50F：→ mayuyu: 停用Direct2D 然後再开启试试看 about:config 05/11 23:58
51F：→ mayuyu: gfx.direct2d.disabled -> true 05/11 23:58
52F：→ mayuyu: 在53下没开e10s也可能会发生问题 改用Fx52也会这样吗？ 05/11 23:58
53F：→ mayuyu: 嗯..你有装日版补丁的MacType吗？ 05/11 23:58
54F：→ mayuyu: 还有显示卡驱动也可能是原因之一 更新或者倒退回旧版 05/11 23:58
55F：→ mayuyu: 有时候也可以解决问题 05/11 23:59
56F：→ mayuyu: 最後再试试看Fx54beta版 Fx54有解决一些GPU渲染的bug 05/11 23:59
57F：→ mayuyu: 不确定能不能帮助你修复这个问题 05/11 23:59
其实在52版就这样了，所以我一直没有将text-stroke作为首选方式，
另外我没装任何MacType，纯粹是用D2D，所以或许用纯D2D会有这问题？
最早一开始我的NV驱动相当旧是2011年版的，後来发现53有问题後就换为最新的驱动，
换句话说，新旧驱动我都测过，都会有叠字的现象。
53版的e10s等等来试试看。
我问一下，mayuyu大你进去我点的那个网址用网站预设字型大小，
在无MacType下是没问题的不会出现叠字吗？
--------------------------------------------------
经过测试53 e10s 开了之後叠字的问题依然存在...
另外做一个测试把设定档砍了建了一个新的只安装Stylish看看情形，
问题依旧，看来是Firefox本身的问题了
※ 编辑: csid (36.238.113.10), 05/12/2017 00:44:06
58F：推 mayuyu: 我这里看你的网页渲染是正常的 05/12 00:58
60F：→ mayuyu: 我没有遇过二重叠影的问题 不过我知道有这个bug 05/12 00:59
61F：→ mayuyu: 而重开机清掉字型的快取通常可以解决 05/12 00:59
62F：→ mayuyu: 对了上面撷图所使用的样式 05/12 00:59
63F：→ mayuyu: -webkit-text-stroke-width: 0.1px; 05/12 01:00
64F：→ mayuyu: text-shadow: 0 0 1px rgba(0,0,0,0.1), 0 0 2px rgba(0,0 05/12 01:00
65F：→ mayuyu: ,0,0.01), 0 0 3px rgba(0,0,0,0.01) !important; 05/12 01:00
66F：→ mayuyu: 我本身平常不用这个样式 因为有一点点模糊 05/12 01:00
67F：→ mayuyu: 这个样式的优点是可以减少text-stroke造成的毛刺 05/12 01:00
68F：→ mayuyu: 也许你可以再试试看 05/12 01:01
69F：→ mayuyu: 1. 用上面说的方法 关掉D2D 看看渲染是否正确 05/12 01:02
70F：→ mayuyu: 2. 关掉D2D之後 将 05/12 01:02
71F：→ mayuyu: gfx.font_rendering.directwrite.force-enabled 05/12 01:02
72F：→ mayuyu: 强制设为true 看看渲染是否正确 05/12 01:02
73F：→ mayuyu: 3. 开启D2D和DW的状态下 在CCS里加入 05/12 01:03
74F：→ mayuyu: transform: rotate(0.001deg); 05/12 01:03
75F：→ mayuyu: img { 05/12 01:03
76F：→ mayuyu: transform: rotate(0deg)!important; 05/12 01:03
77F：→ mayuyu: } 05/12 01:03
78F：→ mayuyu: 看看有没有变化 05/12 01:03
79F：推 mayuyu: 我担心上面的旋转角度太小了测不出来 改大一点好了 05/12 01:31
80F：→ mayuyu: transform: rotate(0.05deg); 05/12 01:31
81F：→ mayuyu: 甚至再更大一点 总之让文字旋转一个角度 05/12 01:31
82F：→ mayuyu: 尽量大一点 试试看这样渲染会不会突然恢复正常 05/12 01:31
mayuyu大，使用0.001deg之後叠影就消失了，可是一旦拿掉旋转这段，
叠影的问题又回来了，这是字型快取的问题吗？
我试着清掉字型快取後重开机，问题依旧....
※ 编辑: csid (218.166.132.156), 05/12/2017 03:24:22
83F：→ mayuyu: 抱歉我用推文回覆 05/12 20:24
84F：→ mayuyu: 喔喔！ 成功了！ 那麽就请继续保留这段旋转的样式w 05/12 20:25
85F：→ mayuyu: 你可以测试更小的角度 譬如说-0.0000000001deg 05/12 20:25
86F：→ mayuyu: 看能不能用更小的角度消除这个bug 05/12 20:25
87F：→ mayuyu: 旋转极微小的角度 肉眼完全不会有感觉 05/12 20:25
88F：→ mayuyu: 不会影响到阅读的请放心 05/12 20:25
89F：→ mayuyu: 而大一点的角度 会让字体变得较平滑 05/12 20:25
90F：→ mayuyu: 有些人是选择取消text-shadow和text-stroke 05/12 20:25
91F：→ mayuyu: 只用比较大角度的rotate来平滑字型(不建议这样做) 05/12 20:26
92F：→ mayuyu: 这个旋转同时会让Windows停用对字型的Grid-fitting 05/12 20:26
93F：→ mayuyu: 使用DW的情况下 关闭Grid-fitting会取得较好的渲染效果 05/12 20:26
94F：→ mayuyu: 所以旋转不但可以消除bug 对於字体渲染会更有帮助 05/12 20:26
95F：→ mayuyu: 不过这段CSS的缺点是对整个网页都进行旋转 05/12 20:26
96F：→ mayuyu: (CSS里有锁住图片不旋转才没有造成图片模糊) 05/12 20:26
97F：→ mayuyu: 可能会影响渲染的效能 05/12 20:27
98F：→ mayuyu: 如果使用的是WIN7 而且防毒软体不是avast的话 05/12 20:28
99F：→ mayuyu: 我建议安装MacType和MacType的日文补丁 05/12 20:28
100F：→ mayuyu: (不建议avast是因为avast会和MacType相冲突) 05/12 20:28
102F：→ mayuyu: 安装MacType後按照说明替换补丁 05/12 20:28
103F：→ mayuyu: 开启UserParams.ini设定档 修改ForceNoHinting = 1 05/12 20:28
104F：→ mayuyu: 使用补丁的好处是补丁只针对DW渲染的字体作旋转 05/12 20:28
105F：→ mayuyu: 而不用旋转整个网页 效率可能会比较好 05/12 20:29
106F：→ mayuyu: 不过现在都用GPU加速 基本上应该是无感 05/12 20:29
107F：→ mayuyu: 可能不会觉得效能有什麽变化 05/12 20:29
旋转角度不能设太小，叠影还是会跑回来，0.0001差不多，某些网页(例如巴哈)，
的写法会排版跑掉....这个问题不知道Firefox之後会不会修，
还是就是单纯win7没救了这样，总之感谢mayuyu大陪我屁了这麽多XD
※ 编辑: csid (220.133.149.197), 05/12/2017 23:54:53