如果GoogleFont服務不可用，如何加載自託管字體文件？

我想使用谷歌字體目錄中的字體集合。我選擇了樣式，並在我的項目模板中包含CSS link標籤。如果GoogleFont服務不可用，如何加載自託管字體文件？

或者，您也可以使用Google字體下載該集合，並且您得到的是一個包含所有字體樣式的zip文件。

我可以創建一個Google提供給我的HTML中包含的CSS，因此如果訪問者無法訪問Google Font API，我想提供自己託管的字體文件作爲後備。

如何設置此功能，防止Google字體文件和自託管字體文件被下載？如果用戶確實可以訪問Google字體，則瀏覽器不應該下載字體的自主版本。

2012-07-16 Armando Pérez Marqués

我想你可以在'src'規則中用'local（）'路徑跟蹤'url（）'路徑 - 瀏覽器在找到它可以加載的時候應該停止查找。雖然沒有嘗試過。 – 2012-07-16 14:22:49

根據規範：「當需要字體時，用戶代理遍歷列出的一組引用，使用第一個引用可以成功激活。」 - http://www.w3.org/TR/css3-webfonts/#descdef-src – 2012-07-16 14:25:33

這是一個意見，而不是一個答案：我認爲你正在推翻它。如果Google的字體無法加載，我只會在CSS中指定一個後退系統字體。首先，你真的擔心Google的服務器停機嗎？第二，您的網站在沒有指定網頁字體的情況下仍然可以使用嗎？（它可能應該是） – chipcullen 2012-07-16 14:34:21

您有3個選項：使用不同的font-family名稱（例如"Droid Sans"和"Droid Sans Local"），然後使用像"Droid Sans", "Droid Sans Local", Helvetica, Arial, sans-serif字體堆疊在規則，

使用2臺@font-face。但是，這會導致下載這兩種字體，從而增加加載時間。
使用一組@font-face at-rules，但使用2組src屬性。如果瀏覽器決定下載指定的所有字體文件，這也可能增加加載時間。
像大多數CDN一樣，通過DNS在網絡層進行鏡像。這需要網絡設置，但您的CSS將保持不變，並且它對瀏覽器最爲透明，無需額外下載。

Google Web Fonts已經在使用第三個選項，所以如果您已經使用CDN託管的源代碼，我個人不會打擾。但是，如果您使用的是不太可靠的源代碼，可能會值得。但是，如果您要完成設置字體的工作，爲什麼不爲所有靜態資源（圖像，樣式表，JS等）進行設置？最合理的行動方式是獲得免費或付費的CDN來託管您的所有靜態資產。

來源

2012-07-16 14:52:14

嗯，它實際上是有道理的，承載CDN上的所有東西，包括字體。我將不得不檢查字體許可證是否允許。 – 2012-07-16 18:52:43

我會建議只是自己託管他們。這是fontsprings'「防彈」字體表面語法。

@font-face { 
font-family: 'MyFontFamily'; 
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfont-webfont.woff') format('woff'), 
    url('myfont-webfont.ttf') format('truetype'), 
    url('myfont-webfont.svg#svgFontName') format('svg'); 
}

擁有所有這四個設置將確保它可以跨瀏覽器使用。只要確保你的字體有四種類型。 Font Squirrel也有很棒的fontface套件。

來源

2012-07-16 21:56:16

如果GoogleFont服務不可用，如何加載自託管字體文件？

回答

相關問題