Question

我用Font Squirrel创建了@font面，并将其包含在我的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

我认为问题在于透明背景，但我不知道如何解决它？

Answer 1

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

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

以下是有关该属性的更多信息：http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty

Answer 2

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

每个浏览器以不同方式处理字体抗锯齿 - 这是IE出现在顶部的少数几次之一，但我相信FireFox默认也是反锯齿。

如果您的问题与Chrome有关，则会回答here。

Answer 3

在字体squirrel中生成字体时，在专家选项中，尝试选中删除字距选项，这是渲染行的最后一个选项。在大多数情况下，它帮助了我。

Answer 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;

}

Answer 5

您可以使用：

-webkit-font-smoothing: antialiased;

字体抗锯齿问题，让我发疯

5 个答案: