网页字体渲染

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>

老实说，如果它在所有大文本上，这看起来确实有点矫枉过正。请注意，这会增加您的客户需要下载的数据量。然而，对于大标题，此方法可能会导致看起来比操作系统呈现的文本更好的内容。

Answer 2

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

Answer 3

除了抗锯齿之外，还可以尝试启用清晰的字体。

Answer 4

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