0

我正在为一家企业建立一个网站，并与之配套，他们完全重新命名，新徽标等等。该徽标具有时尚的嗖嗖字体，我想在页面标题等中与整个网站相呼应，因此我使用 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 字体，但这并没有什么不同。

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

干杯， - 本。

4

3 回答 3

0

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

于 2013-08-22T15:29:40.223 回答
0

你可以尝试一些CSS

   -webkit-font-smoothing: subpixel-antialiased;
   -webkit-text-stroke: 0px;
   letter-spacing: 2px;
于 2013-08-22T15:33:01.753 回答
0

我可以通过强制重新绘制页面 ondomready 来解决这个问题。

使用 jQuery：

$(function({
    $('#page').hide();
    setTimeout(function() {
        $('#page').show();
    }, 0);
});
于 2014-03-05T03:31:47.153 回答