自定義字體顯示很奇怪

從一開始我就需要說我知道我所要做的不是「正確的方式」，但我正在拼命工作的客戶需要這個特定的字體。自定義字體顯示很奇怪

因此，我需要在客戶的網站上使用VOGUE使用的確切字體。所以我拿了.eot & .ttf並上傳到我的服務器上。然後，我添加CSS定義：

/*fonts fonts for IE*/ 
@font-face { 
    font-family: VogueDidot; 
    src: url('font/FBDidotL-Regular.eot') format('embedded-opentype'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: "VogueDidot Light"; 
    src: url('font/FBDidotL-Light.eot') format('embedded-opentype'); 
    font-weight: normal; 
    font-style: normal; 
} 

/*fonts for other browsers*/ 
@font-face { 
    font-family: VogueDidot; 
    src: url('font/FBDidotL-Regular.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: "VogueDidot Light"; 
    src: url('font/FBDidotL-Light.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
}

而對於我的元素的CSS是：

.post h1 { 
    display: block; 
    height: 100%; 
    font-family: VogueDidot; 
    font-size: 55px; 
    text-transform: uppercase; 
    overflow: hidden; 
    line-height: 58px; 
}

而且，通常情況下，我期望看到的一切工作就像一個魅力。

但它不是...

下面是它看起來應該像：

enter image description here

這就是它的外觀在我的網站：

enter image description here

任何想法？

來源

2013-03-23 chris_so

你有鏈接嗎？你有沒有在該頁面上的任何iframe？對我來說，造成同樣的問題.... – hjuster 2013-03-23 13:55:48

你會想使用一個很好的字體轉換器，所以你支持所有主流瀏覽器。嘗試fontsquirrel.com – 2013-03-23 14:04:59

@hjuster不幸的是我現在在本地服務器上：（ – 2013-03-23 19:54:56

看起來像瀏覽器試圖顯示粗體字體並重復相鄰的灰色像素（細線）。嘗試使用font-weight: normal（該font-weight:bold從h1元素繼承）。

來源

2013-03-23 13:52:41 darthmaim

'font-weight：bold'設置不會被繼承;相反，它是大多數瀏覽器中'h1'的默認設置，但基本的解釋是正確的：當字體被聲明爲'normal'和CSS（瀏覽器默認樣式表單，在這種情況下）請求'粗體'，瀏覽器可能會使用算法粗體。 – 2013-03-23 15:09:49

謝謝！這是問題:) – 2013-03-23 20:38:53

自定義字體顯示很奇怪

回答

相關問題