2012-07-27 73 views
1

我無法獲得font-face正常工作(這就是我通常使用Google字體的原因)。但是客戶有自己的字體,我必須使用。我無法獲得字體工作

我測試和對this site(主菜單)比較

這裏是我的fiddle

爲什麼我不能得到這個工作?另一個網站上的字體工作得很好。

這裏是我的CSS:

@font-face{ 
    font-family:'testFont'; 
    src:url('http://www.cphvision.dk/sites/all/themes/vision/webfonts/21B1BE_0_0.eot'); 
    src:url('http://www.cphvision.dk/sites/all/themes/vision/webfonts/21B1BE_0_0.ttf'), format('truetype'); 
} 

ul li a { 
font-family:'testFont', sans-serif; 
    font-weight:normal; 
} 

,我也有我的本地服務器上進行測試。不在那裏工作。
我以前測試過使用font-face從谷歌下載的字體。沒有成功。

我在做什麼錯?

回答

2

我以前也遇到過font-face問題。我知道當我使用它時,我沒有用引號(​​單或雙)包圍font-family屬性。此外,出於某種原因,似乎與將主體樣式表中的font-face規則放在一起,因此我將它們放在單獨的樣式表中,並將其放在主樣式表的頂部:

@import url('font.css'); 

這裏是我的這個規則的一個實例的一個簡單的例子,直接從文件複製:

@font-face{ 
    font-family: Kalinga; 
    src:url(kalinga.ttf); 
} 

@font-face{ 
    font-family: Kalinga; 
    font-weight: bold; 
    src: url(kalingab.ttf); 
} 

我知道,我沒加這兩個TTF,這裏的EOT,但它是一個很好的例子供你參考。我建議先用eot或ttf開始,然後開始工作,然後在完成時添加另一個(修改時做的更改較少)。

+0

嗯......測試@ nick-beranek的字體松鼠,我下載了一個軟件包。打開文本html,字體工作。但是,當我把它放入我的WP解決方案時,它不起作用:(我嘗試刪除我的字體並只是有這些新的,但它並沒有幫助...... – Steven 2012-07-27 22:22:13

+0

這並沒有解決我的問題,但無論如何接受答案。 – Steven 2012-07-27 23:14:35

0

我將建議使用Font Squirrel這樣的服務。我這樣說是因爲你可以上傳一個字體,它會自動將它轉換爲eotttf等,併爲你提供一個包含你的字體和一些示例文件的zip文件來幫助你開始。

0

我知道這聽起來很瘋狂,但我得到@ font-face使用絕對路徑時遇到了麻煩。不過,我始終用相對路徑來使用它,並且工作正常。我也推薦Font Squirrel。所有你需要做的就是調整相對於他們提供的生成工具包和代碼中的字體的CSS路徑。當然,對於Worpress,總是使用兒童主題來規避默認的字體聲明。