fonts - 网页字体渲染

Question

创建网页时，我总是遇到同样的问题。当我添加一个大于 16-18px 的字体时，它看起来很糟糕。它的锯齿状和像素化。我尝试过使用不同的字体和粗细，但是我没有太多运气。

注意：它只有在windows中是这样的。主要在 Opera 和 FF 中，也在 IE7 中，但没有那么糟糕。在 Linux 中，字体看起来不错。我没看过Mac。

你们做什么来解决这个问题？如果有什么。我注意到 SO 上的标题也很参差不齐，但它们足够小，不会看起来很糟糕。

Answer 1

您无法强制用户更改其操作系统呈现字体的方式。如果对您来说很重要，那么您可以用图像替换大标题，这使您可以准确控制字体的呈现方式（并确保标题看起来完全符合您的意愿，即使用户没有您的建议字体安装）。

如果您这样做，请确保为看不到图像的人提供替代文本表示。我倾向于使用 CSS 来显示背景图像，并隐藏标题的内容。像这样。

<style>
    h1
    {
        height: 32px;
        width: 100px;
        background: url("path/to/image")
    }

    h1 span
    {
        display: none;
    }
</style>

<h1>
    <span>
       Heading Text
    <span>
</h1>

老实说，如果它出现在所有大文本上，这似乎有点矫枉过正。请注意，它会增加您的客户需要下载的数据量。然而，对于大标题，这种方法可能会导致看起来比 OS 呈现的文本更好的东西。

Answer 2

启用抗锯齿应该可以解决显示问题。

Answer 3

除了抗锯齿，尝试启用清晰类型。

Answer 4

在 Windows 上，启用ClearType将解决此问题。但是，您不能强制用户使用它。这不是浏览器问题；这是操作系统的字体平滑方法。