Chrome中的Web字體渲染

我正在爲一家企業構建一個網站，並且隨它一起完成品牌重塑，新徽標等等。該標誌的特點是我想在頁面標題等內容中反映整個網站的時尚sw font字體，所以我採用了ttf並通過font2web.com運行，並將生成的字體版本（eot，woff，svg等）放入到我的代碼和生成的CSS @ font-face規則並開始使用它。在IE，Firefox，Safari和iPad上，字體看起來很好 - 儘管Safari很有邊界。但在Chrome？它看起來非常糟糕，所有的細節都丟失了，而且這些字母變成了白色的塊。Chrome中的Web字體渲染

下面是截圖 - >http://i.imgur.com/Vp6kmxZ.png

，這裏是我的CSS（液體標籤） - >

@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字體，但它沒有什麼區別。

有沒有什麼辦法可以讓人看起來可以接受，或者我不得不求助於基於圖像的頭部，這是我真正不想要的。

乾杯， - 本。

來源

2013-08-22 Ben Wedlake

這是Windows中Chrome中的一個已知問題。 https://code.google.com/p/chromium/issues/detail?id=137692

來源

2013-08-22 15:29:40 ericjbasti

一些CSS，你可以嘗試

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

來源

2013-08-22 15:33:01

我能夠通過強制頁ondomready的重繪來解決這個問題。

使用jQuery：

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

來源

2014-03-05 03:31:47

Chrome中的Web字體渲染

回答

相關問題