不同系统下字体渲染的对比

[krjt]

之前测试字体的时候发现 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 真是推广衬线字体道路上的一大阻碍_(:з」∠)_。

[icyalala]

大家都用 Retina 屏幕就好多了。。

[loading]

图片无法展现出来吧，次像素平滑的最终效果是和屏幕有关系的。

[love]

@loading linux 选灰度效果也差不多的，同样吊打 Windows

[stoneabc]

为什么我更喜欢 windows 下的。。

[edinina]

用着 imac5k，双系统体验表示 win 下明显锐利

[anguiao]

现在无论是高分屏还是低分屏，我都更喜欢 Windows 的渲染方式了。
Windows 现在要解决的问题就是把微软雅黑换掉，已经是拖后腿的存在了。

[932357832]

@anguiao 如果你是在高分屏下使用 Windows，你可以考虑换成“新微软雅黑”字体，而且只需要替换字体文件就行了，不需要像 MacType 那么复杂。总体来说显示效果比原版的要好很多。

[krjt]

@loading 其实如果设置得当的话是可以看出来的哦，sub-pixel 的信息都 encode 在颜色里



具体的条件见这篇论文的[2.2 章]( http://rastertragedy.com/RTRCh2.htm)

[loading]

@krjt 我说的效果是到肉眼的效果，apple 因为软硬件固定，所以次像素可以定死。（这也是为啥外接显示器，2K 效果很差）

windows 没有绑定硬件，所以，trueType，你需要自己设置，进行微调。

[stoneabc]

@932357832 一直想问，这个新微软雅黑到底什么时候正式实装？

[jliangchan]

@loading 从 MBP2016 之后, macOS 默认渲染就不是 4 物理像素对 1 逻辑像素了, 什么次像素定死毫无逻辑.

[loading]

@jliangchan 我举例子啊，linux 和 windows 呢。
那我把上面“次像素“”改成“渲染策略”行了吧。

[WindowPain]

文章和博客都很棒，有时间我再试试那个维基百科的 CSS。

[anguiao]

@932357832 我已经换过了，从 2017 年测试版的新版字体出来之后，就一直替换使用。结果过去这么久了，还是没正式推出。
还是有些小问题的，有几个字在特定情况下显示不正常。

[philchang1995]

@anguiao 有替换的教程么？搜了一下看很多说的都不一样

[WindowPain]

测试了一下，很奇怪的是在 type builds character 里 Firefox 并没有触发 auto hyphenation，在其他网页却成功了。
另外再试了一下维基百科的 CSS，字号变大了之后阅读体验确实好多了，就是编辑器有点怪怪的，英文条目右上角的图标位置有点低，还有已知的 pop-up 的问题。不过给读者用肯定是没问题了，以后阅读时会常开着。

[krjt]

@WindowPain Firefox 下应该是不需要 prefix 的： https://caniuse.com/#feat=css-hyphens，我在这么多系统下都测试过了_(:з」∠)_

[WindowPain]

@krjt 所以觉得很奇怪( ・∇・) 我把 type builds character 保存下来，再用 Firefox 打开就正常了……

[fenx]

Chrome 不用灰度抗锯齿确实不行，一些 Tail 地方处理的对比度低，小字号更加灾难。用了灰度后，像是字干直接粗了一像素。但我看 Firefox （ Slight Hinting ） 的也会在升部衬线处丧失一些细节……还是高分屏吧。
话说 win 上的引擎不都是 DirectWrite 吗？