字體在Windows PC上很奇怪，但不在Mac/iPad上

Question

我在我的網頁上使用了一個自定義字體，使用@font-face { font-family: MyFont; src: url('myfont.otf'); }，我發現了一個奇怪的事情，我會試着解釋它。

在Mac/iPad上：字體的高度恰好是字母的高度。

在Windows PC上：字體的高度恰好是字母的高度 - 但是在字母的頂部有某種「填充」，所以字母的底部部分像g，y，j，等字體高度之外。如果我要在文本下面劃一個div，那麼g或y會「掛在」它的內部。

沒有填充或保證金，只在Windows PC上顯示。在蘋果產品上它看起來很好。怎麼來的！？使用哪個瀏覽器並不重要。它是可修復的還是我必須找到另一種字體？

希望那是明顯的，真的不知道何解釋呢？

Answer 1

OTF字體可以在Windows中是有問題的時候。您最好指定多個字體文件，以便客戶端瀏覽器可以選擇它所需的字體文件。

您可以使用字體面發生器如：Font Squirrel

你會在你的樣式像這樣結束：

@font-face { 
    font-family: 'MyFont'; 
    src: url('MyFont.eot'); 
    src: url('MyFont.eot?#iefix') format('embedded-opentype'), 
     url('MyFont.woff') format('woff'), 
     url('MyFont.ttf') format('truetype'), 
     url('MyFont.svg#MyFont') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}