谷歌網絡字體本地存儲與在線來源

當我在我的CSS文件中使用@import規則添加谷歌網頁字體時，它工作正常。谷歌網絡字體本地存儲與在線來源

但是，當我下載該字體並將其存儲在本地服務器中，然後將@ font-face規則指向我自己的機器時，它不起作用。

所以我所做的就是替換這一行，在我的CSS/fonts.css文件：

@import url(http://fonts.googleapis.com/css?family=Michroma);

與此：

@font-face { 
font-family: 'Michroma'; 
font-style: normal; 
font-weight: 400; 
src: url(http://localhost/xampp/mysite/css/fonts/michroma/micrhoma.woff) format('woff'); 
}

換句話說，我只是複製從代碼該字體的googleapi。我將字體文件（.woff）保存在上面的路徑中（我已經重新檢查過，它的確在那裏）。

我試圖編輯URL這個爲好，但沒有好：

src: url(fonts/michroma/michroma.woff) format('woff');

我不相信有任何理由，如果我們在本地使用它們谷歌網頁字體是行不通的，所以要有我在做什麼不對。線索？這不是我們如何定義自己的字體？（我從來沒有嘗試過）。

來源

2012-09-10 user961627

單字體不需要字體系列名稱的引號。你應該刪除並運行它將正常工作。 font-family：Michroma;

來源

2012-09-10 09:58:25

其實現在好了！ – user961627

引號是可選的，所以刪除它們不可能解決任何問題。 –

@ user961627，你是什麼意思？你的評論與建議的答案有關嗎？我仍然可以通過Michroma（在IE，Firefox，Chrome上測試）重現您的問題，但不能與另一種字體Rye一起使用，所以我懷疑這是一個字體特定的問題。你重新加載字體？（我剛剛做了，但沒有幫助。） –

如註釋中所示，問題的原因是URL中的字體名稱拼寫錯誤。

這是一種在本地使用Google字體的方法。正確的方法是使用像fonts/michroma/michroma.woff這樣的相對URL而不是http：URL與localhost（它們會要求你在你的計算機上運行一個HTTP服務器）。

但是，它不適用於不支持WOFF格式的瀏覽器（在這種情況下）。通常，將Google字體作爲遠程託管使用會更好，因爲他們知道如何爲不同的瀏覽器提供不同的字體格式。參看到Should I locally store CSS generated by the Google Web Fonts API?

來源

2012-09-10 11:24:13

偏離主題但相關：爲了將.ttf字體轉換爲大多數瀏覽器支持的更多格式，請轉到FontSquirrel：http://www.fontsquirrel.com/fontface/generator。剛剛發現它，它很棒。 – user961627

谷歌網絡字體本地存儲與在線來源

回答

相關問題