在 Windows 上加载的字体看起来真的很糟糕。您使用哪种字体渲染效果更好?

平面设计 字体 亚像素渲染
2021-12-29 05:00:27

编辑问题是我在 Vista 的设置中没有打开“Cleartype”。如果您在 Windows 操作系统上安装/启用了 Cleartype,这个问题可能没有多大意义。


Web 上出现了一种新的排版风,CSS3 的 font-face 属性能够加载操作系统/系统集以外的字体。我的 Mac 可以完美渲染,而我的 Windows 机器却没有。我应该使用哪组字体在 Windows 上呈现更好的效果?

这类似于 Stack Overflow 上的问题。

这里是一个在 PC 上使用 Myriad Pro 渲染的网站看起来很糟糕的示例:http: //css-tricks.com/

注意:我不是在谈论浏览器版本之间的抗锯齿差异(例如 IE9 和 IE6 之间)。

我期待你的测试得到答案,一个字体列表加上它们看起来不错的大小(请使用 px),或者至少以它们可以用于短文本或小标题的方式。

例如,此刻“League Gothic, 30px”如下所示:

在此处输入图像描述

4个回答

这应该是一个评论(因此制作了这个 CW),但我认为这个问题存在一些误解和错误的假设。由于您显然希望回答这个问题(毕竟您已经提供了赏金),所以这是我的两分钱。

从您的屏幕截图中,在我看来,您已将 Windows 设置为定期渲染字体(与子像素渲染相反),并且您的浏览器可能没有进行任何抗锯齿处理(可能,但后来 JPG 压缩消失了)。

以下处理 windows 的示例来自 XP Pro SP 3,因此假设情况 至少 在 Vista 和 7 中处于同一级别是相当安全的。

Windows 有(在 XP 中)使用或不使用 ClearType 的选项。如果没有 ClearType,字体会像屏幕截图一样呈现。这是 Windows 对话框中没有 CT 的放大图像:

证据1

你看它是一个二元运算:像素是黑色的或透明的。现在有了一些现代浏览器,即使没有 CT,它们也会做一些抗锯齿。这是来自 css-tricks.com 的 Windows XP 和 Chrome 8 并且 CT 处于关闭状态(如上图所示):

证据2

看看发生了什么?正如您在问题中所述,您可能已经这样做了。

注意:我不是在谈论新浏览器和旧浏览器之间的抗锯齿差异(例如 IE9 和 IE6 之间)。

现在,ClearType

这是 Windows 对话框中完全相同的文本,这次是 CT: 证据3

如果您对它的基础感兴趣,请参阅关于亚像素渲染的 Wikipedia 文章。并且打开 ClearType 会影​​响浏览器渲染吗?与 Windows XP 和 Chrome 8 相同的“其他”文本并且 ClearType 为 ON: 证据4

确实如此!在我们讨论的时候,我可能会补充一点(至少)IE 8 使用 ClearType 渲染,即使它在 Windows 级别被禁用。


100% 比较抗锯齿和 ClearTyped 文本不像将 ClearTyped 文本与非抗锯齿进行比较那样激进。不过,它明显更大胆:

AA:证据 5CT:证据6

要查看没有抗锯齿的效果,请查看littlemad 的屏幕截图

为了比较,这里是 OS X 默认渲染中的相同“其他”:证据 7 甚至比 ClearType 更粗体。


回答你的问题:任何字体如果您的操作系统以不同方式呈现字体,则可能是因为您已将操作系统设置为呈现字体,所以. 或者可能是您的浏览器不支持抗锯齿或 ClearType。

另一个问题是,为什么有些字体正确渲染而有些字体不正确——即使是这种情况(但我在您在 Windows 上提到的网站上没有看到任何问题)。或者您是否要求在没有任何渲染的情况下看起来足够的字体?


这里还回答了常见问题:“是的,我都知道——为什么 ClearType 看起来与 OS X 的渲染不同?!”

因为他们是不同的。子像素渲染并不是一件容易实现的事情。ClearType 是 Microsoft 的注册商标,受10项专利保护(+ 1 项正在申请中;参见维基百科)。他们不可能是一样的。

如果问题与您引用的 Stackoverflow 问题相同,那么答案是否也相同?

这是一个提示问题。

当您生成字体工具包时(如在 FontSquirrel 中),您需要在 Expert 选项上指定 Hinting。

选择专家,然后在渲染下选择:

应用提示 - 改进 Win 渲染。

ttfautohint可用于重建字体的提示字节码;默认设置(与 GDI 兼容)应该有助于 Windows 呈现字体。

这与浏览器无关,而与windows本身有关。

*nix 系统(unix/linux 和 OSX 包含在其中,因为它具有 Unix 基础)可以选择精细控制文本的显示方式,并且通常设置为亚像素渲染(这比我有更多的技术解释'我会给你,但它本质上使用子像素(屏幕像素的红色、绿色和蓝色部分)来渲染文本),其中 Windows 使用 cleartype,这是它自己的渲染类型,我有点对力学模糊。

几乎只是Windows没有亚像素渲染,不是字体或文件,而是显示这些字体和文件的操作系统。