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

【问题标题】：@font-face rendering issue in Chrome for PCPC 版 Chrome 中的@font-face 渲染问题
【发布时间】：2011-12-12 19:12:12
【问题描述】：

我使用 font-squirrel 将字体嵌入到网站（选择了应用提示），但它在 PC 版 Chrome v15.0 中无法正确呈现。字体显示，但效果不佳。我确信 font-squirrel 给了我正确的代码，所以我认为我的 CSS 存在冲突。提前感谢您的帮助。

Link to site

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

}

【问题讨论】：

你说的不好是什么意思？屏幕截图或正在发生的事情的示例会有所帮助，特别是因为我猜这是一个字距调整问题。
这看起来像是 Mac 与 Windows 的字体字距调整问题（您的标记没有任何问题）。也许只是为 Windows 用户尝试不同的字体。

标签： google-chrome rendering font-face

【解决方案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 Examples
Adtrak Examples

【讨论】：

【解决方案2】：

您可以指定文本阴影：

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

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

【讨论】：

知道了！由于某种原因，它确实使用了这些值： text-shadow: 0 1px 0 rgba(0,0,0,0.01);
是的，我打反了，抱歉。

【解决方案3】：

抱歉各位，但这在 Chrome 16 中不再适用。

类似话题在这里：@font-face anti-aliasing on windows and mac

我在谷歌浏览器论坛上写了关于它，现在等待反应：http://www.google.com/support/forum/p/Chrome/thread?tid=43f549bc2a960a12&hl=en

【讨论】：

【解决方案4】：

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

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

但是，至少第一个问题可以通过使用 SVG 字体来解决，前提是实际上禁用了字体平滑。有一个很好的 post at User Agent Man 关于如何检测字体平滑，我用它来创建一个小脚本（约 600 字节），如果字体平滑被禁用，它会自动更新你的字体 CSS。

您可以找到my Font Smoothie script at GitHub'S GIST，您只需在页面的任意位置添加以下行：

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

但是，您还需要良好的hinted 字体才能获得漂亮的字形。幸运的是，有一种方法可以使用ttfautohint 向 ttf 字体添加一些自动生成的提示，然后您可以使用 Font Squirrel 来生成网络字体。整个过程有点棘手，所以我写了an article on how to create web-fonts on Pixels|Bytes，它解释了如何为字体添加提示以及如何使用我的字体冰沙脚本。希望这会有所帮助:)

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

【讨论】：