之前测试字体的时候发现 Windows 下字体渲染会很难看。一直以为是字体 hinting 的问题,不过测试之后才发现好像是 Windows 本身对于没有 hinting 的字体处理有很大问题。
我一直是在 Linux 上用 FreeType 一直没有注意到不同系统下字体渲染的区别,于是就对 Linux、Windows、macOS、iOS 下的字体渲染做了一下详细的对比:font.render
文章里面测试了很多设定,不过这一张图就应该能看出问题来了,请在新标签页放大到 100% zoom level 观看。
https://i.imgur.com/TEOkd6e.gif
Gif 对颜色保持不是很好,所以如果想要对比原图的话请看全文。
如果你想测试自己系统的字体渲染的话,使用的测试页可以在这里找到:Type Builds Character
Windows 和 Chrome 真是推广衬线字体道路上的一大阻碍_(:з」∠)_。
1
icyalala 2020-03-10 10:05:13 +08:00
大家都用 Retina 屏幕就好多了。。
|
2
loading 2020-03-10 10:08:21 +08:00 via Android 1
图片无法展现出来吧,次像素平滑的最终效果是和屏幕有关系的。
|
4
stoneabc 2020-03-10 10:35:47 +08:00
为什么我更喜欢 windows 下的。。
|
5
edinina 2020-03-10 10:39:10 +08:00
用着 imac5k,双系统体验表示 win 下明显锐利
|
6
anguiao 2020-03-10 10:48:15 +08:00 via Android
现在无论是高分屏还是低分屏,我都更喜欢 Windows 的渲染方式了。
Windows 现在要解决的问题就是把微软雅黑换掉,已经是拖后腿的存在了。 |
7
932357832 2020-03-10 11:33:17 +08:00
@anguiao 如果你是在高分屏下使用 Windows,你可以考虑换成“新微软雅黑”字体,而且只需要替换字体文件就行了,不需要像 MacType 那么复杂。总体来说显示效果比原版的要好很多。
|
8
krjt OP @loading 其实如果设置得当的话是可以看出来的哦,sub-pixel 的信息都 encode 在颜色里
具体的条件见这篇论文的[2.2 章]( http://rastertragedy.com/RTRCh2.htm) |
9
loading 2020-03-10 11:49:18 +08:00
@krjt 我说的效果是到肉眼的效果,apple 因为软硬件固定,所以次像素可以定死。(这也是为啥外接显示器,2K 效果很差)
windows 没有绑定硬件,所以,trueType,你需要自己设置,进行微调。 |
11
jliangchan 2020-03-10 12:25:31 +08:00 1
@loading 从 MBP2016 之后, macOS 默认渲染就不是 4 物理像素对 1 逻辑像素了, 什么次像素定死毫无逻辑.
|
12
loading 2020-03-10 12:50:58 +08:00 via Android
@jliangchan 我举例子啊,linux 和 windows 呢。
那我把上面“次像素“”改成“渲染策略”行了吧。 |
13
WindowPain 2020-03-10 13:35:28 +08:00 via iPhone
文章和博客都很棒,有时间我再试试那个维基百科的 CSS。
|
14
anguiao 2020-03-10 13:42:40 +08:00 via Android
@932357832 我已经换过了,从 2017 年测试版的新版字体出来之后,就一直替换使用。结果过去这么久了,还是没正式推出。
还是有些小问题的,有几个字在特定情况下显示不正常。 |
15
philchang1995 2020-03-10 18:04:14 +08:00
@anguiao 有替换的教程么?搜了一下看很多说的都不一样
|
16
WindowPain 2020-03-11 02:53:52 +08:00
测试了一下,很奇怪的是在 type builds character 里 Firefox 并没有触发 auto hyphenation,在其他网页却成功了。
另外再试了一下维基百科的 CSS,字号变大了之后阅读体验确实好多了,就是编辑器有点怪怪的,英文条目右上角的图标位置有点低,还有已知的 pop-up 的问题。不过给读者用肯定是没问题了,以后阅读时会常开着。 |
17
krjt OP @WindowPain Firefox 下应该是不需要 prefix 的: https://caniuse.com/#feat=css-hyphens,我在这么多系统下都测试过了_(:з」∠)_
|
18
WindowPain 2020-03-11 19:12:13 +08:00 via iPhone
@krjt 所以觉得很奇怪( ・∇・) 我把 type builds character 保存下来,再用 Firefox 打开就正常了……
|
19
fenx 2020-03-12 13:25:38 +08:00
Chrome 不用灰度抗锯齿确实不行,一些 Tail 地方处理的对比度低,小字号更加灾难。用了灰度后,像是字干直接粗了一像素。但我看 Firefox ( Slight Hinting ) 的也会在升部衬线处丧失一些细节……还是高分屏吧。
话说 win 上的引擎不都是 DirectWrite 吗? |