CSS字體渲染問題

我正在開發一個網站。我正在使用谷歌字體來設計我的頁面。但它不能正確顯示。我讀了一些人造字體，但我相信只有當所需的字體沒有提供時才適用。我已經導入我的谷歌的字體，代碼是CSS字體渲染問題

@font-face { 
    font-family: 'Titillium Web'; 
    font-style: normal; 
    font-weight: 600; 
    src: local('Titillium WebSemiBold'), local('TitilliumWeb-SemiBold'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wprx7IBmrqA5IG9z8WNe77b9o.woff) format('woff'); 
}

我的字體CSS是

font-size:30px; 
font-family: 'Titillium Web'; 
font-style: normal; 
font-weight: 600;

但我相信它顯示虛假的字體。以下是左圖應該顯示的圖像與右圖顯示的圖像之間的區別。

My problem http://resource.theboulderdesign.com/400/homebox/gettingcompare.png

我希望有人能解決我的問題。

Morgan Kenyon

來源

2013-04-04 morganw09dev

您測試過哪些瀏覽器？另外，當我使用CSS3字體之前，我必須爲各種瀏覽器指定各種格式。我承認我對Google的字體不太熟悉。 – Cfreak 2013-04-04 00:19:33

Chrome是最糟糕的，這就是圖片所在。在IE和Firefox中，它看起來好多了。 – morganw09dev 2013-04-04 00:30:56

這是一個Chrome/Windows問題。它會影響字體厚度和字母間距，但您可以添加一個白色text-stroke順利出來：

-webkit-text-stroke-width: 1px; 
-webkit-text-stroke-color: white; 
-webkit-text-fill-color: white;

演示：http://jsfiddle.net/zzmbu/

下面是它的截圖：

enter image description here

來源

2013-04-04 00:25:10 Blender

-1

我也發現如果你加

text-shadow:0px 0px #FF0000;

屬性到我的CSS，它呈現正確。我不知道爲什麼。

來源

2013-04-14 03:15:04 morganw09dev

CSS字體渲染問題

回答

相關問題