2011-04-20 144 views
4

我在我正在製作的網站上首次使用web字體,並且我注意到字體的邊框在Windows和Linux上似乎不同& Mac(在Linux上也是如此& Mac)。這不依賴於瀏覽器,因爲所有操作系統上的相同版本的Chrome和Firefox都具有這些差異。基本上,在Windows上,角色頂部有額外的空間,而在Linux和Mac上,角色的邊界框更接近角色的實際頂部(例如,變音箱位於框外)。這自然會改變位置,邊距等的行爲方式。在Windows,Mac和Linux上呈現不同的Web字體

目前字體被定義如下:

 
@font-face { font-family: "FranklinGothicHand"; 
    src: url('fonts/franklingothichanddemi-webfont.eot'); 
    src: url('fonts/franklingothichanddemi-webfont.eot?iefix') format('eot'), 
     url('fonts/franklingothichanddemi-webfont.woff') format('woff'), 
     url('fonts/franklingothichanddemi-webfont.ttf') format('truetype'), 
     url('fonts/franklingothichanddemi-webfont.svg#webfontLgJOAlmK') format('svg'); 
} 

由於這個原因,例如,我不能正確地垂直對齊的物品的裝飾初始帽到製品的第一行是因爲其位置在不同的操作系統上是不同的。

任何人都可以想到任何解決方案嗎?

回答

3

我前幾天正在關注這個問題,我在這個網站上找到了解釋正在發生的事情。 http://www.owlfolio.org/htmletc/legibility-of-embedded-web-fonts/我從文章中得到的結論是,操作系統的渲染字體不同,唯一真正的修復顯然是按摩字體本身,以使它們處理不同的OS渲染風格。不幸的是編輯實際字體可能不是我猜測的選項。

0

我剛剛發現-webkit-font-smoothing: antialiased; - 它似乎在OSX上的Safari和Chrome上做得很好。

相關問題