Chrome 中的 Web 字体渲染答案

【问题标题】：Web font rendering in ChromeChrome 中的 Web 字体渲染
【发布时间】：2013-08-22 15:25:48
【问题描述】：

我正在为一家企业建立一个网站，并与之配套，他们正在彻底重塑品牌、新徽标等等。徽标具有时尚的嗖嗖字体，我想在页面标题等中呼应整个网站，所以我拿了 ttf 并通过 font2web.com 运行它并将生成的字体版本（eot、woff、svg 等）放入将生成的 CSS @font-face 规则添加到我的代码中并开始使用它。在 IE、Firefox、Safari 和 iPad 上的 Safari 中，字体看起来不错——尽管 Safari 有点边缘。但是在 Chrome 中？它看起来非常糟糕，所有细节都丢失了，字母变成了白块。

这是截图 --> http://i.imgur.com/Vp6kmxZ.png

这是我的 CSS（带有 Liquid 标签）-->

@font-face {
font-family: 'MotionPicture';
    src: url({{ 'MotionPicture.eot' | asset_url }});
    src: local('☺'), url({{ 'MotionPicture.woff' | asset_url }}) format('woff'), 
    url({{ 'MotionPicture.svg' | asset_url }}) format('svg'),
    url({{ 'MotionPicture.ttf' | asset_url }}) format('truetype');
    font-weight: normal;
    font-style: normal;
}

如果您想要确切的字体，可以在这里获取 --> http://www.dafont.com/motion-picture.font

我尝试了一些通过 Google 找到的技巧，将 SVG 版本移动到字体的顶部，因为 Chrome 无法使用 AA truetype 字体，但这并没有什么不同。

有什么方法可以让这看起来可以接受，或者我必须求助于基于图像的标题，我真的不想要。

大家好， ——本。

【问题讨论】：

标签： css google-chrome fonts

【解决方案1】：

这是 Windows 版 Chrome 中的一个已知问题。 https://code.google.com/p/chromium/issues/detail?id=137692

【讨论】：

【解决方案2】：

你可以尝试一些 css

   -webkit-font-smoothing: subpixel-antialiased;
   -webkit-text-stroke: 0px;
   letter-spacing: 2px;

【讨论】：

【解决方案3】：

我能够通过强制重绘页面 ondomready 来解决这个问题。

使用 jQuery：

$(function({
    $('#page').hide();
    setTimeout(function() {
        $('#page').show();
    }, 0);
});

【讨论】：