作者mayuyu ((・ω・)ノ)
看板Browsers
标题[字型] 字型渲染2017
时间Sun Feb 12 23:17:51 2017
Firefox从48以後支援text-stroke
比较图
以下图片要1:1显示避免缩放失真才能看得出来差异
缩小的话看起来都很黑
放大的话看起来都很糊
所以要1:1显示看起来才能看得出差别
Firefox 50.1.0 + WIN7 + MacType DirectWrite补丁(ForceNoHinting = 1)
http://i.imgur.com/HQdtwCH.png
文字颜色还是偏淡
使用text-shadow加阴影
text-shadow: 0 0 1px
http://i.imgur.com/MLRcOIt.jpg
变粗了，但是阴影加得太重了，看起来雾雾的很吃力
改用text-stroke增加文字描边的厚度
-webkit-text-stroke: 0.0500em
http://i.imgur.com/9bciUlH.png
超粗，而且不会像text-shadow那样雾雾的，
但是文字边缘比较不平滑，
同时太粗了，笔画较复杂的字会黏成一团，
分办起来有些吃力，例如上方横幅「拍卖」的「卖」这个字。
把厚度减少一点
-webkit-text-stroke: 0.0250em
http://i.imgur.com/pH4ZEtk.png
没那麽粗，不过看起来比较合理
在Chrome上的情况
-webkit-text-stroke: 0.0300em
http://i.imgur.com/XaOVqw0.png
颜色好像比较淡
其他范例
D2D
http://i.imgur.com/wXmGSiv.png
text-stroke
http://i.imgur.com/3ijpfE8.png
D2D
http://i.imgur.com/6X64YVO.png
text-stroke
http://i.imgur.com/f0msLPR.png
D2D
http://i.imgur.com/eyJuyEA.png
text-stroke
http://i.imgur.com/BnwZVNm.png
text-stroke
http://i.imgur.com/nIFjfLt.png
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 61.219.36.51
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Browsers/M.1486912676.A.FA2.html
1F：→ mayuyu: mactype补丁 02/12 23:20
3F：→ mayuyu: 设定ForceNoHinting = 1 可以在WIN7关闭Hinting 02/12 23:21
4F：推 t7yang: 不错，还不知道新增了这个CSS，可以更新到killserfi作为 02/12 23:59
5F：→ t7yang: 选项 02/12 23:59
6F：推 hohiyan: 实用推 02/13 01:40
7F：推 hohiyan: 唔…我用了之後有些字型会有叠影的状况出现？ 02/13 01:55
9F：→ hohiyan: 在其他网站中英文字型有些也出现相同的状况 02/13 01:55
@hohiyan 看起来像是字型混合显示的时候渲染发生问题
重新开机试试看 如果有使用patch 重新覆盖dll和设定档後
重开几次清掉快取试试 覆盖前要先关闭mactype
(dll要覆盖到mactype安装目录和windows系统目录
注意EasyHK32要放SysWOW64 EasyHK64要放到System32)
10F：推 abc0922001: 推麻友 02/13 09:23
11F：推 tina1007: 推 02/13 09:45
12F：→ tina1007: 想问麻友大火狐的左边侧栏是用哪个套件呢? 02/13 09:45
13F：→ mayuyu: 左边是工具列 Vertical Toolbar 02/13 14:04
14F：→ mayuyu: 我渲染显示是正常的 换个字体试试看 还有Fx版本？ 02/13 14:04
15F：→ mayuyu: Fx虽然48开始支援 -webkit 但是预设是关闭的 02/13 14:04
16F：→ mayuyu: 要在about:config里面打开layout.css.prefixes.webkit 02/13 14:05
17F：→ mayuyu: 49以後预设值才是打开的 caniuse则是标50以後才支援stroke 02/13 14:05
18F：→ mayuyu: 所以最好换到50以後的版本测试 02/13 14:05
更正 我眼残 can i use 也是写49版开始支援-webkit-text-stroke
48版要调整layout.css.prefixes.webkit
19F：推 abram: 发现51版装Stylish开网页会慢 若直接改字型为苹方体 Median 02/13 20:42
20F：→ abram: 也会有加粗的效果 但是不会变慢 02/13 20:43
@abram 你的渲染好漂亮 颜色比较淡 但是边缘比较平滑
系统是不是WIN10？
图里面看起来是苹方的简体字型(SC) 例如各地低温的「低」
底部是一点 双北的「北」左边的竖和下面的提相接的位置
苹方有繁体字型(TC) 繁简二个字型都安装的话
可以繁体中文网页用TC 简体网页用SC 写法会接近当地习惯
可惜的是没有苹方日文 所以用Medium字重显示 而不用渲染
看纯中文网页没问题 看日文网页就少了渲染
有些网页会中日文混合 苹方Medium和日文Regular排在一起
Regular会显得太细 看起来会不平均
苹方缺少了粗体字重 只好用中粗代替粗体
苹方中粗的粗细设计得很接近Medium
所以有时候会看不太出来网页上使用的粗体字标题
和标准字内文的对比差异
但是用Medium字重取代直接描边加粗 有个很大的优点
字体会比较紮实 还有笔画比较复杂的字 单纯描边加粗
如果加得太粗 笔画会黏在一起 变成一团黑
有合理设计处理过内白的Medium才可以避免这种问题
22F：推 abc0922001: 效果满不错的，不过我粗细改为0.15px 02/14 09:04
@abc0922001 粗细会因为使用的字型种类 大小 字重
萤幕种类 解析度 DPI设定 而有不同的合适值
可以依个人喜好调整
我试过几个萤幕 可以用 0.0125em 作为初始值慢慢往上调整
23F：推 aeolus0829: 苹方体在 win10 的效果比 noto 好 (有照3F的方法做) 02/14 09:25
@aeolus0829 WIN10的话不用 ForceNoHinting = 1
WIN8.1/WIN10本身有关闭Hinting的功能 GridFitMode = 1
(直接copy patch里面的设定档就可以了 作者都写好了)
WIN7因为没有这个功能 所以HiDPI字型渲染比WIN10差
patch的作者意外发现 在WIN7下如果将文字稍微旋转的话
系统会取消文字的Hinting 所以做出了让WIN7也可以关闭Hinting的功能
如果是用WIN8.1/WIN10 就不需要设定这个选项
据传闻 三月中要发表的RS2字型渲染会有更重大的进步(?)
24F：推 twistedvate: 都用stylish配webfonthttp://i.imgur.com/s8l84Eo.jp 02/14 09:53
25F：→ twistedvate: g 02/14 09:53
27F：→ twistedvate: 有点小瑕疵不过很好阅读 02/14 09:55
28F：→ twistedvate: 不用装任何字体软体 02/14 09:55
30F：推 abc0922001: 请问楼上，webfont是什麽？ 02/14 10:27
31F：推 abc0922001: 阿，Google到了 02/14 10:44
33F：→ twistedvate: 我是用这个 02/14 11:07
※ 编辑: mayuyu (61.219.36.126), 02/14/2017 11:27:08
34F：→ mayuyu: @twistedvate 好像有缺字 剑心的「剑」这个字高度和其他字 02/14 11:40
35F：→ mayuyu: 不一样 02/14 11:40
36F：推 abc0922001: 复制的时候，边线好明显，改用webfont的方式了 02/14 11:59
37F：→ abc0922001: 仿照仿照twistedvate大分享的连结，来编stylish 02/14 12:00
38F：推 abc0922001: 我改用noto sans tc 发现简体字会缺字，可能要再用sc 02/14 13:19
39F：→ abc0922001: 的吧 02/14 13:19
40F：推 twistedvate: 因为我都用简转繁了没困扰，这字型自己用下来还蛮耐 02/14 13:24
41F：→ twistedvate: 看的啦 02/14 13:24
42F：推 twistedvate: 真希望微软中字字型预设能跟mac一样… 02/14 13:31
43F：→ twistedvate: 还是自己套样式比较快 02/14 13:32
能否提供您用的样式 看起来有缺字
你贴的图片里剑心的「剑」这个字的高度和其他字不一样
http://i.imgur.com/ZpOzuSN.jpg
可能是设定的字型里找不到这个日文汉字 所以系统用了其他字型替补
44F：推 abc0922001: 回家安装noto sans cjk tc，应该就不会缺字问题了 02/14 13:42
45F：推 abram: 回原PO大 我是win7 但是我为了硬体加速把DirectWrite关掉 02/14 14:23
46F：→ abram: 发现这样跟Mactype相容性最好 速度也最快 我的苹方体是SC的 02/14 14:24
47F：→ abram: 但是用起来没有觉得怪怪的 不知道哪里可以抓到繁体的 我再 02/14 14:25
48F：→ abram: 来试试看 02/14 14:25
@abram 啊 原来你把DirectWrite(D2D)关掉了
所以你的渲染效果是MacType的渲染效果而不是DirectWrite
难怪会那麽平滑 我用WIN10+4K都无法那麽漂亮xD
也许是因为关掉了D2D加速 所以你使用stylish渲染网页的时候
会觉得开网页的速度变慢
使用MacType可以将字体调整到非常粗非常锐利完全不会模糊
对比图
DirectWrite Patch+Stroke Stylish
图晚点补
MacType(我使用的设定)
图晚点补
看起来可能还是MacType好一点 不过为了D2D加速
我只好放弃用MacType渲染Fx和Chrome
49F：推 abram: 更新 我刚刚抓到苹方繁体版了 字型如下所示 但是好像比较差 02/14 14:33
51F：→ abram: 1. 可以注意到「电」那个字的雨字旁 我比较喜欢SC和日文版 02/14 14:34
52F：→ abram: 的雨部内部是左上右下的四个点 而非像是窘表情似的 >< 02/14 14:35
你提到的电字的写法正是台湾的标准写法xD
http://i.imgur.com/HHgr6fQ.png
如果不在意写法的话 用苹方SC取代TC完全没问题
反过来用TC取代SC的话 会有很多简体字无法显示
53F：→ abram: 2. 苹方繁体抓到也有分中粗、中黑等六个字型 但是FX里面却 02/14 14:36
54F：→ abram: 只能选苹方繁体，没有细项的中粗中黑可以选 用一阵子可 02/14 14:37
55F：→ abram: 能宁可改回SC转繁体的版本来用好了 02/14 14:37
可以用stylish指定字重
或者是安装的时候不要装Regular 只装Medium
Fx选苹方会用Medium取代Regular
56F：推 abc0922001: 我觉得Fx渲染一直都比chrome好XD 02/14 15:07
57F：→ abc0922001: SC版的繁体还有好几个地方我看不惯，像辶、骨、亮， 02/14 15:10
58F：→ abc0922001: 还是TC的好，而中文版的众我看不惯 02/14 15:10
59F：→ abc0922001: 更正，日文版的众 02/14 15:11
60F：推 kaoh08: youtube那是什麽style啊？好赞啊 02/14 16:12
@kaoh08 YouTube的样式是这个
https://userstyles.org/styles/130610/youtube-umbra
图晚点补
63F：→ abc0922001: 使用Win10+Cent Browser+135％缩放 02/14 20:57
65F：推 ji394xu3: 其实我倒比较习惯chrome(stylish 用的字体是微软正黑体) 02/15 10:33
69F：→ abc0922001: 苹方跟微软正黑我也喜欢 02/15 16:36
70F：推 kaoh08: 太黑了 眼睛看了很累 02/16 05:59
太黑可以调淡一点 不要加那麽粗
D2D设定里也可以调整对比度
图里面的日文是明了体(Meiryo)而不是苹方包含的日文假名
要强制yahoo.jp用苹方 在选项->内容->字型->进阶->语言->日文设定里
无衬线选苹方 取消勾选下方的「优先使用网页的字型」
看完记得要把这个设定勾回来 不然显示会不正常
我说的中日文混合的情况 是指日文网页混合Arial和Meiryo
这样汉字会使用苹方 但假名会使用Meiryo
由於苹方改用Medium Meiryo就会显得比较细
所以用Medium取代Regular有些地方字体会粗细不平均
72F：推 kaoh08: 楼上的渲染看起来比重恰好 字型也很稳重 很接近完美呢！ 02/16 08:41
73F：推 kaoh08: ji大的字型则是略胜 大量文字下阅读较轻松 辨识度高 02/16 08:48
74F：→ kaoh08: 我指苹方体那个 想看看两边设定相结合 02/16 08:50
※ 编辑: mayuyu (61.219.36.116), 02/16/2017 09:58:35
75F：推 abram: 原来看yahoo.jp还有这麽多学问 谢谢mayuyu大的教学啦～ 02/16 15:29
77F：→ abram: 难怪贾伯斯靠字型就可以称霸一方阿 02/16 15:39
78F：推 RaRaYA: 这一帖好棒啊~~~感谢大大，之前找到的资源都好像有点久了. 02/16 17:36