字体抗锯齿问题，让我抓狂答案

【问题标题】：Font antialiasing issue, driving me mad字体抗锯齿问题，让我抓狂
【发布时间】：2013-12-29 15:53:32
【问题描述】：

我用Font Squirrel 创建了一个@font face，并将它包含在我的CSS 中：

body {
    font-family:'neouthin';
    text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.3);
}

但是，它显示的锯齿严重，我希望它显示抗锯齿：

网站：http://www.tributetotheair.com
截图：http://cjoint.com/13dc/CLlrV4gUitH.htm

我认为是透明背景的问题，但我不知道如何解决？

【问题讨论】：

我觉得没问题（我在 Mac 上使用 Chrome 31）。您能否发布一个显示糟糕结果的屏幕截图，并说明您在哪个浏览器中看到它？
cjoint.com/13dc/CLlrV4gUitH.htm 这是截图，你可以看到这个字体与背景上的相同字体相比有多脏。
明白了。屏幕截图显示的是什么网络浏览器？
以防万一检查浏览器的缩放选项...

标签： css fonts background antialiasing

【解决方案1】：

您可能想尝试添加text-rendering: optimizeLegibility;。

目前它对浏览器的支持有限，但可能会有所帮助。

这里有更多关于房产的信息：http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty

【讨论】：

【解决方案2】：

这取决于您在哪个浏览器上查看 - 我怀疑是 Chrome？

每个浏览器都以不同的方式处理字体抗锯齿 - 这是 IE 脱颖而出的少数几次之一，尽管我相信 FireFox 默认情况下也抗锯齿。

如果您的问题是与 Chrome 相关的，那么我们会回答 here。

【讨论】：

【解决方案3】：

在字体松鼠中生成字体时，在专家选项中，尝试勾选Remove Kerning选项，Rendering行的最后一个选项。在大多数情况下，它对我有帮助。

【讨论】：

【解决方案4】：

有两个问题：

字体很细，不太适合体型。这是一种更适合标题的装饰性字体。

当您将 Neou Thin 设置为粗体而不是使用 Neou Bold 时，粗体文本看起来特别糟糕。这意味着浏览器采用 Neou Thin 并尝试创建它的人造粗体变体，这几乎总是看起来很糟糕。要解决此问题，请将font-family 设置为“neoubold”，或修复您的 CSS：

@font-face {
    font-family: 'neouthin';
    src: url('neou-thin-webfont.eot');
    src: url('neou-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('neou-thin-webfont.woff') format('woff'),
         url('neou-thin-webfont.ttf') format('truetype'),
         url('neou-thin-webfont.svg#neouthin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'neouthin'; /* FIX: add bold to the neothin family */
    src: url('neou-bold-webfont.eot');
    src: url('neou-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('neou-bold-webfont.woff') format('woff'),
         url('neou-bold-webfont.ttf') format('truetype'),
         url('neou-bold-webfont.svg#neoubold') format('svg');
    font-weight: bold;
    font-style: normal;

}

【讨论】：

【解决方案5】：

你可以用这个：

-webkit-font-smoothing: antialiased;

【讨论】：