2015-04-15 37 views
1

上我有一些CSS是這樣的:瀏覽器使用不正確的字體某些服務器

font-family: "Open Sans Condensed",sans-serif; 

,我有一個很難理解的顯示的字體是如何選擇的。我一直認爲瀏覽器檢查客戶端是否安裝了第一種字體,如果沒有,它會使用列表中的下一個字體。但是現在我遇到了一個問題:在我的本地和測試環境中,使用Firefox,第一種字體被使用,但在生產中,使用同一臺機器上的相同瀏覽器,第二種字體被選中。

爲什麼網站在一臺服務器上使用一種字體而在另一臺服務器上使用另一種字體?

有沒有什麼辦法讓所有服務器都使用相同的字體而不使用@ font-face?

回答

1

想通了......

這條線是從谷歌導入字體:

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'> 

在生產服務器上,他們已經決定禁止所有類似的外部請求,因此它可以不加載字體。這不是我們的其他服務器上的情況下...

所以我donwloaded從谷歌的字體,在http://www.fontsquirrel.com/tools/webfont-generator產生的網絡字體,然後添加下面的CSS:

@font-face { 
    font-family: 'Open Sans Condensed'; 
    src: url('../fonts/opensans-condbold-webfont.eot'); 
    src: url('../fonts/opensans-condbold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/opensans-condbold-webfont.woff2') format('woff2'), 
     url('../fonts/opensans-condbold-webfont.woff') format('woff'), 
     url('../fonts/opensans-condbold-webfont.ttf') format('truetype'), 
     url('../fonts/opensans-condbold-webfont.svg#open_sans_condensedbold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 
0

爲什麼不使用@ font-face?它得到了很好的支持和發明,以避免這類問題。請記住,出於安全原因,不適用於FF中的子域名。

+0

我結束了使用@ font-face,但最初,因爲它沒有它的工作,我想避免添加像這樣的字體,以幫助性能。對我來說,當我使用完全相同的機器和瀏覽器來查看它時,它只能在一臺服務器上運行,而不能在另一臺服務器上運行。 – Chris

0

可能必須做的方式瀏覽器會在本地服務器和實時服務器中查找字體。我之前遇到過一個問題,那就是字體文件名是「Open Sans Condensed」與「OpenSans-Condensed」(它是不同的字體,但遵循相同的規則)。所以也許你可以找到文件名並將它添加到你的'font-family'標籤中。

相關問題