V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
krjt
V2EX  ›  设计

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

  •  
  •   krjt · 2020-03-10 09:49:04 +08:00 · 7643 次点击
    这是一个创建于 1718 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    19 条回复    2020-03-12 13:25:38 +08:00
    icyalala
        1
    icyalala  
       2020-03-10 10:05:13 +08:00
    大家都用 Retina 屏幕就好多了。。
    loading
        2
    loading  
       2020-03-10 10:08:21 +08:00 via Android   ❤️ 1
    图片无法展现出来吧,次像素平滑的最终效果是和屏幕有关系的。
    love
        3
    love  
       2020-03-10 10:35:03 +08:00
    @loading linux 选灰度效果也差不多的,同样吊打 Windows
    stoneabc
        4
    stoneabc  
       2020-03-10 10:35:47 +08:00
    为什么我更喜欢 windows 下的。。
    edinina
        5
    edinina  
       2020-03-10 10:39:10 +08:00
    用着 imac5k,双系统体验表示 win 下明显锐利
    anguiao
        6
    anguiao  
       2020-03-10 10:48:15 +08:00 via Android
    现在无论是高分屏还是低分屏,我都更喜欢 Windows 的渲染方式了。
    Windows 现在要解决的问题就是把微软雅黑换掉,已经是拖后腿的存在了。
    932357832
        7
    932357832  
       2020-03-10 11:33:17 +08:00
    @anguiao 如果你是在高分屏下使用 Windows,你可以考虑换成“新微软雅黑”字体,而且只需要替换字体文件就行了,不需要像 MacType 那么复杂。总体来说显示效果比原版的要好很多。
    krjt
        8
    krjt  
    OP
       2020-03-10 11:34:12 +08:00   ❤️ 1
    @loading 其实如果设置得当的话是可以看出来的哦,sub-pixel 的信息都 encode 在颜色里



    具体的条件见这篇论文的[2.2 章]( http://rastertragedy.com/RTRCh2.htm)
    loading
        9
    loading  
       2020-03-10 11:49:18 +08:00
    @krjt 我说的效果是到肉眼的效果,apple 因为软硬件固定,所以次像素可以定死。(这也是为啥外接显示器,2K 效果很差)

    windows 没有绑定硬件,所以,trueType,你需要自己设置,进行微调。
    stoneabc
        10
    stoneabc  
       2020-03-10 11:54:47 +08:00
    @932357832 一直想问,这个新微软雅黑到底什么时候正式实装?
    jliangchan
        11
    jliangchan  
       2020-03-10 12:25:31 +08:00   ❤️ 1
    @loading 从 MBP2016 之后, macOS 默认渲染就不是 4 物理像素对 1 逻辑像素了, 什么次像素定死毫无逻辑.
    loading
        12
    loading  
       2020-03-10 12:50:58 +08:00 via Android
    @jliangchan 我举例子啊,linux 和 windows 呢。
    那我把上面“次像素“”改成“渲染策略”行了吧。
    WindowPain
        13
    WindowPain  
       2020-03-10 13:35:28 +08:00 via iPhone
    文章和博客都很棒,有时间我再试试那个维基百科的 CSS。
    anguiao
        14
    anguiao  
       2020-03-10 13:42:40 +08:00 via Android
    @932357832 我已经换过了,从 2017 年测试版的新版字体出来之后,就一直替换使用。结果过去这么久了,还是没正式推出。
    还是有些小问题的,有几个字在特定情况下显示不正常。
    philchang1995
        15
    philchang1995  
       2020-03-10 18:04:14 +08:00
    @anguiao 有替换的教程么?搜了一下看很多说的都不一样
    WindowPain
        16
    WindowPain  
       2020-03-11 02:53:52 +08:00
    测试了一下,很奇怪的是在 type builds character 里 Firefox 并没有触发 auto hyphenation,在其他网页却成功了。
    另外再试了一下维基百科的 CSS,字号变大了之后阅读体验确实好多了,就是编辑器有点怪怪的,英文条目右上角的图标位置有点低,还有已知的 pop-up 的问题。不过给读者用肯定是没问题了,以后阅读时会常开着。
    krjt
        17
    krjt  
    OP
       2020-03-11 05:38:05 +08:00
    WindowPain
        18
    WindowPain  
       2020-03-11 19:12:13 +08:00 via iPhone
    @krjt 所以觉得很奇怪( ・∇・) 我把 type builds character 保存下来,再用 Firefox 打开就正常了……
    fenx
        19
    fenx  
       2020-03-12 13:25:38 +08:00
    Chrome 不用灰度抗锯齿确实不行,一些 Tail 地方处理的对比度低,小字号更加灾难。用了灰度后,像是字干直接粗了一像素。但我看 Firefox ( Slight Hinting ) 的也会在升部衬线处丧失一些细节……还是高分屏吧。
    话说 win 上的引擎不都是 DirectWrite 吗?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1098 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 79ms · UTC 18:52 · PVG 02:52 · LAX 10:52 · JFK 13:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.