使用 CSS 平滑字体答案

【问题标题】：Smooth fonts with CSS使用 CSS 平滑字体
【发布时间】：2010-06-20 02:53:54
【问题描述】：

如何获得流畅的字体？我不希望边缘看起来很模糊。

Hacky 解决方案不是问题 :)

【问题讨论】：

如果我没记错的话，我认为 CSS3 有一个 font-smooth:always; 属性。我自己还没有尝试过，所以我不能评论它的有效性。
看看这里（相同主题）：stackoverflow.com/questions/11487427/font-smoothing/11493510

标签： javascript css fonts antialiasing

【解决方案1】：

您可以对标题使用一些字体替换解决方案，例如 Cufón，但对于大文本块使用它的效率太低。

如果您希望更改浏览器的字体渲染，您可能不会有太多运气，因为它们都有自己的文本渲染例程（但请查看-webkit-font-smoothing 了解最新版本的 Safari 和 Chrome）。

【讨论】：

嗯，它可能只需要大字体的东西，所以大块的文本不会成为问题。为什么 Cufon 如此高效？
并不是特别低效，只是使用浏览器的原生文本渲染例程总是比使用使用 Canvas 或 SVG 显示文本的自定义 JavaScript 库更快。

【解决方案2】：

如前所述，font-smooth 有一个 CSS 属性 - 但我不确定它的支持范围有多广。这很可能是您必须在操作系统或字体本身中调整的属性，这当然意味着这只是本地的。我知道 Windows 有一个名为 ClearType 的功能，它允许您调整抗锯齿以与您的显示器很好地配合。

正如 Ben Alpert 所提到的，字体替换解决方案（例如 Cufon 或 TypeKit）是标题文本的其他潜在解决方案。

【讨论】：

【解决方案3】：

实际上有一个名为 text-rendering 的 CSS 属性，它实际上适用于 Firefox 系列浏览器。正如 Ben 所说，Safari 和 Chrome 系列还有 -webkit-font-smoothing。我不知道文本渲染是否适用于 Internet Explorer，但这段代码工作得很好：

text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;

此外，如果您要自定义浏览器：

html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

【讨论】：