之前测试字体的时候发现 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 Mar 10, 2020
大家都用 Retina 屏幕就好多了。。
|
 |
2
loading Mar 10, 2020 via Android  1
图片无法展现出来吧，次像素平滑的最终效果是和屏幕有关系的。
|
 |
4
stoneabc Mar 10, 2020
为什么我更喜欢 windows 下的。。
|
 |
5
edinina Mar 10, 2020
用着 imac5k，双系统体验表示 win 下明显锐利
|
 |
6
anguiao Mar 10, 2020 via Android
现在无论是高分屏还是低分屏，我都更喜欢 Windows 的渲染方式了。
Windows 现在要解决的问题就是把微软雅黑换掉，已经是拖后腿的存在了。 |
 |
7
932357832 Mar 10, 2020
@anguiao 如果你是在高分屏下使用 Windows，你可以考虑换成“新微软雅黑”字体，而且只需要替换字体文件就行了，不需要像 MacType 那么复杂。总体来说显示效果比原版的要好很多。
|
 |
8
krjt OP 1
@loading 其实如果设置得当的话是可以看出来的哦，sub-pixel 的信息都 encode 在颜色里
 具体的条件见这篇论文的[2.2 章]( http://rastertragedy.com/RTRCh2.htm) |
|
9
loading Mar 10, 2020
@krjt 我说的效果是到肉眼的效果，apple 因为软硬件固定，所以次像素可以定死。（这也是为啥外接显示器，2K 效果很差）
windows 没有绑定硬件，所以，trueType，你需要自己设置，进行微调。 |
 |
11
jliangchan Mar 10, 2020 1
@loading 从 MBP2016 之后, macOS 默认渲染就不是 4 物理像素对 1 逻辑像素了, 什么次像素定死毫无逻辑.
|
|
12
loading Mar 10, 2020 via Android
@jliangchan 我举例子啊，linux 和 windows 呢。
那我把上面“次像素“”改成“渲染策略”行了吧。 |
 |
13
WindowPain Mar 10, 2020 via iPhone
文章和博客都很棒，有时间我再试试那个维基百科的 CSS。
|
|
14
anguiao Mar 10, 2020 via Android
@932357832 我已经换过了，从 2017 年测试版的新版字体出来之后，就一直替换使用。结果过去这么久了，还是没正式推出。
还是有些小问题的，有几个字在特定情况下显示不正常。 |
|
16
WindowPain Mar 11, 2020
测试了一下，很奇怪的是在 type builds character 里 Firefox 并没有触发 auto hyphenation，在其他网页却成功了。
另外再试了一下维基百科的 CSS，字号变大了之后阅读体验确实好多了，就是编辑器有点怪怪的，英文条目右上角的图标位置有点低，还有已知的 pop-up 的问题。不过给读者用肯定是没问题了，以后阅读时会常开着。 |
|
17
krjt OP @WindowPain Firefox 下应该是不需要 prefix 的： https://caniuse.com/#feat=css-hyphens，我在这么多系统下都测试过了_(:з」∠)_
|
|
18
WindowPain Mar 11, 2020 via iPhone
@krjt 所以觉得很奇怪( ・∇・) 我把 type builds character 保存下来，再用 Firefox 打开就正常了……
|
 |
19
fenx Mar 12, 2020
Chrome 不用灰度抗锯齿确实不行，一些 Tail 地方处理的对比度低，小字号更加灾难。用了灰度后，像是字干直接粗了一像素。但我看 Firefox （ Slight Hinting ） 的也会在升部衬线处丧失一些细节……还是高分屏吧。
话说 win 上的引擎不都是 DirectWrite 吗？ |
Select Language