Question

我使用font-squirrel将字体嵌入到网站上（选择了Apply Hinting），并且在Chrome v15.0 for PC中无法正确呈现。字体显示，但很差。我确定font-squirrel给了我正确的代码，所以我认为我的CSS存在冲突。在此先感谢您的帮助。

enter image description here

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;

}

Answer 1

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

对于@ font-face交付的字体，修复方法是将svg文件放在正下方。但高于.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

Answer 2

您可以指定text-shadow：

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

使用自定义字体时，可以在Google Chrome中更好地渲染它们。它迫使Chrome使用替代渲染路径。请注意，这会增加最终用户计算机的CPU负载。

Answer 3

对不起guyes，但这在Chrome 16中不起作用。

这里有类似的主题：@font-face anti-aliasing on windows and mac

我在谷歌Chrome论坛上写了这篇文章，等待现在的反应：http://www.google.com/support/forum/p/Chrome/thread?tid=43f549bc2a960a12&hl=en

Answer 4

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

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

但是，至少第一个问题可以通过使用SVG字体来解决，只有在实际禁用了字体平滑时。关于如何检测font-smooting有一个很好的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生成Web字体。整个过程有点棘手，所以我写了an article on how to create web-fonts on Pixels|Bytes，它解释了如何为字体添加提示以及如何使用我的Font Smoothie脚本。希望这会有所帮助：）

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

在Chrome for PC中出现@ font-face渲染问题

4 个答案: