Q

自定義字體渲染問題

2013-04-13 127 views 4 likes

4

所以我有時候想強調某些詞是這樣的：自定義字體渲染問題

<h1>I want to <span class="emphasis">emphasize</span> some text.</h1>

同時，我想用一個自定義字體爲H1的文字：

@font-face 
{ 
    font-family: 'MuseoSlab'; 
    src: url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.eot'); 
    src: url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.eot?#iefix') format("embedded-opentype"), url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.svg#MuseoSlab500Regular') format("svg"), url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.woff') format("woff"), url('https://digital_time_capsules.s3.amazonaws.com/fonts/Museo_Slab_500-webfont.ttf') format("truetype"); 
    font-weight: normal; 
    font-style: normal; 
}

問題是，Windows中的Chrome與span文本重疊：

chrome overlap

Firefox和IE瀏覽器似乎並不渲染平滑字體：

looks jagged

歌劇似乎呈現它原來的樣子我想：

enter image description here

誰能告訴我發生了什麼，以及我如何解決這些問題？

編輯：

有時候，我不得不在Chrome的令人震驚的問題;有時候我沒有。我已經安裝了最新的Chrome，太：

enter image description here

2013-04-13 wrongusername

+4

它可以在Chrome最新版本中完美運行：http://i.imgur.com/Hf2MONa.png –

+0

不是答案，而是@您的屏幕2和3：不要期望字體（甚至不是系統字體）呈現所有代理（瀏覽器，操作系統，設備......）都一樣。 –

+0

@DannyBeckett奇怪的是，我只是再次打開JSFiddle鏈接，並且現象消失了。我甚至沒有更新我的Chrome ... – wrongusername

A

回答

2

之所以Firefox和IE瀏覽器顯示的字體他們的方式是h1元素有font-weight: bold在默認情況下，你在聲明的字體爲normal重量。這些瀏覽器所做的事可以說是正確的舉措：由於缺乏大膽的字體，他們在算法上大膽地使用字母。

要避免這種情況，請添加h1 { font-weight: normal; }。或者，使用字體系列的粗體字體。

Chrome中奇怪的重疊聽起來像一個特定於安裝的問題，所以您應該首先考慮更新或重新安裝Chrome。

2013-04-14 05:52:48

+0

感謝您對Firefox和IE渲染的解釋！至於Chrome，奇怪的是我的朋友在他的筆記本電腦上經歷了同樣的效果，所以我擔心這可能是一個比較普遍的問題。 – wrongusername

1

我曾經遇到過與Chrome完全相同的問題。這似乎與Chrome中呈現SVG字體有關。如果您更改@font-face中的字體文件的順序以使SVG位於列表的末尾，則問題會消失。您在jsfiddle上的示例在當前版本的Chrome（29.0.1547.76）中仍然呈現錯誤，因此渲染錯誤仍然存在。

2013-10-06 14:43:57 erikvdv1

0

希望這可以幫助別人的未來，但我可以通過遵循以下問題的解決方案，以解決此問題：Chrome svg-Font-Rendering breaks Layout

這成功地固定在非平滑邊緣，同時打破了佈局和/或壓扁字體。

2013-12-12 06:32:07

相關問題