谷歌瀏覽器中的字體呈現問題

我正在設計一個使用HTML5/CSS的網頁。我使用了自定義字體「Reboard」我的導航欄，我已經使用下面的代碼在我的樣式表添加它：谷歌瀏覽器中的字體呈現問題

@font-face { 
    font-family:'Reboard'; 
    src: local('fonts/Reboard.ttf'); 
}

的字體看起來Firefox和Safari的罰款。但是，在Chrome上，字體呈現的字體間有一些奇怪的間距。我附上以下圖片展示的區別：

在Mozilla和Safari Good rendering

差呈現良好的渲染谷歌瀏覽器 Bad rendering

有我也注意到一個有趣的事情。當我在Google Chrome瀏覽器上放大一點時，字體會以正常的間距奇蹟般地被修復。不知道該如何解決問題。

感謝您的幫助。

來源

2014-06-24 Fumbster

您是否使用過.woff字體類型，還請在配置文件中定義MIME類型。 –

讓我把它作爲答案，這對其他用戶會有好處。 –

謝謝，這解決了我的問題。我必須使用WOFF字體類型並將格式聲明爲'woff'。 – Fumbster

這個問題時，網頁上線和字體在那個時候缺少出現。要解決此問題，必須在配置文件中定義.woff字體MIME類型。

注：.woff字體類型被所有最新的瀏覽器使用。

來源

2014-06-24 05:58:58

我認爲這是Chrome中的一個已知問題。

現金http://code.google.com/p/chromium/issues/detail?id=137692#c68

它的出現重新安排@字體面CSS規則，允許SVG的出現「第一」修復了這個問題。

example: 

-before-------------- 

@font-face { 
font-family: 'chunk-webfont'; 
src: url('../../includes/fonts/chunk-webfont.eot'); 
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'), 
url('../../includes/fonts/chunk-webfont.woff') format('woff'), 
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'), 
url('../../includes/fonts/chunk-webfont.svg') format('svg'); 
font-weight: normal; 
font-style: normal; 
} 


-after-------------- 

@font-face { 
font-family: 'chunk-webfont'; 
src: url('../../includes/fonts/chunk-webfont.eot'); 
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'), 
url('../../includes/fonts/chunk-webfont.svg') format('svg'), 
url('../../includes/fonts/chunk-webfont.woff') format('woff'), 
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'); 
font-weight: normal; 
font-style: normal; 
}

很多人在這裏發佈了與此相關的問題。

來源

2014-06-24 05:45:13 imbondbaby

谷歌瀏覽器中的字體呈現問題

回答

相關問題