Question

我正在为一个企业建立一个网站，并且随身携带它们完全是品牌重塑，新标识等等。该徽标具有时尚的swishy字体，我希望在页面标题等网站上回显，所以我拿了ttf并通过font2web.com运行并将生成的字体版本（eot，woff，svg等）放入到网站和生成的CSS @ font-face规则到我的代码并开始使用它。在iPad上的IE，Firefox，Safari和Safari中，字体看起来很好 - 尽管Safari有点边缘。但在Chrome中？它看起来非常糟糕，所有细节都丢失了，字母只是转入白色块。

这是截图 - ＆gt; http://i.imgur.com/Vp6kmxZ.png

这是我的CSS（带有Liquid标签） - ＆gt;

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

如果你想要确切的字体，你可以在这里得到它 - ＆gt; http://www.dafont.com/motion-picture.font

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

有没有什么方法可以接受，或者我必须使用基于图像的标题，我真的不想要这样。

干杯全部， - 本。

Answer 1

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

Answer 2

你可以尝试一些css

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

Answer 3

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

使用jQuery：

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

Chrome中的Web字体呈现

3 个答案: