PC 版 Chrome 中的 @font-face 渲染问题

Question

我使用 font-squirrel 将字体嵌入到网站上（选择“应用提示”），但它在 PC 版 Chrome v15.0 中无法正确呈现。字体可以显示，但效果很差。我确信 font-squirrel 给了我正确的代码，所以我假设我的 CSS 中有冲突。预先感谢您的帮助。

网站链接

@font-face {
    font-family: 'RockwellStd-Light';
    src: url('rockwellstdlight-webfont.eot');
    src: url('rockwellstdlight-webfont.eot?#iefix') format('embedded-opentype'),
         url('rockwellstdlight-webfont.woff') format('woff'),
         url('rockwellstdlight-webfont.ttf') format('truetype'),
         url('rockwellstdlight-webfont.svg#RockwellStdLight') format('svg');
    font-weight: lighter;
    font-style: normal;

}

h1 {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:34px;
    color:#407d3b;
    font-weight:lighter;
    margin-left:20px;

}

h2 {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:32px;
    color:#ece1af;
    font-weight:lighter;
    line-height:42px;

}

h3 {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:20px;
    color:#FFF;
    font-weight:lighter;

}

p {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:14px;
    line-height:17px;
    color:#333;
    text-align:justify;

}

.criteria_table {
    font-family:'RockwellStd-Light', Helvetica, Ariel;
    font-size:14px;
    color:#FFF;

}

Answer 1

https://stackoverflow.com/a/9041280/1112665

对于 @font-face 提供的字体，修复方法是将svg 文件位于 .eot 正下方但位于 .woff 和 .ttf 上方

从这里：

@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
     url(‘webfont.woff’) format(‘woff’),
     url(‘webfont.ttf’)  format(‘truetype’),
     url(‘webfont.svg#svgFontName’) format(‘svg’);
}

到这里：

@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
     url(‘webfont.svg#svgFontName’) format(‘svg’),
     url(‘webfont.woff’) format(‘woff’),
     url(‘webfont.ttf’)  format(‘truetype’);
}

可以在此处查看此修复的示例：

FontSpring 示例
Adtrak 示例

Answer 2

您可以指定 text-shadow:

text-shadow: 0 0 1px rgba(0, 0, 0, .01);

当使用自定义字体时，使它们在 google chrome 中渲染得更好。它强制 Chrome 使用替代渲染路径。请注意，这会增加最终用户计算机上的 CPU 负载。

Answer 3

抱歉，大家，但这在 Chrome 16 中不再起作用。

类似的主题在这里：Windows 和 Mac 上的 @font-face 抗锯齿

我在 Google Chrome 论坛上写了相关内容，等待立即查看反应：http://www. google.com/support/forum/p/Chrome/thread?tid=43f549bc2a960a12&hl=zh-CN

Answer 4

正如 hisnameisjimmy 已经指出的那样，解决方案是使用 SVG 字体，该字体始终使用抗锯齿进行渲染，但这也有一些缺点：

• SVG 字体不包含任何提示信息，因此渲染的字母不像启用了字体平滑的系统上那样清晰。
• SVG 字体的粗细和样式无法更改，因此使用 font-weight:bold; 或 font-style:italic; 无效。

然而，至少第一个问题只有在实际禁用字体平滑功能的情况下才能通过使用 SVG 字体来解决。有一个很好的 帖子User Agent Man 介绍如何检测字体平滑，我用它创建了一个小脚本（约 600 字节），如果禁用字体平滑，它会自动更新您的字体 CSS。

您可以在 GitHub 的 GIST 上找到 我的 Font Smoothie 脚本，您所要做的就是添加在页面中的任何位置添加以下行：

<script src="fontsmoothie.min.js" type="text/javascript"></script>

但是，您还需要一个很好的 提示字体以获得漂亮的字形。幸运的是，有一种方法可以使用 ttfautohint 添加一些自动生成的提示到 ttf 字体，然后你就可以使用 Font Squirrel 生成网络字体。整个过程有点棘手，所以我写了 一篇关于如何在 Pixels|Bytes 上创建网络字体的文章，其中解释了如何向字体添加提示以及如何使用我的 Font Smoothie 脚本。希望这会有所帮助:)

PS：我知道这里不会赞赏链接到我自己的博客，但我认为我的帖子描述了该问题的一个很好的解决方案，所以我还是发布了它。如果您希望我删除该链接，请发表评论，我会这样做。