Google最近在其Webfont收藏中添加了一個阿拉伯字體。爲了使用，我不得不使用http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css，這將是以下代碼：在CSS中添加多個網頁字體

/* 
* Droid Arabic Naskh (Arabic) http://www.google.com/webfonts/earlyaccess 
*/ 
@font-face { 
    font-family: 'Droid Arabic Naskh'; 
    font-style: normal; 
    font-weight: 400; 
    src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.eot); 
    src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.eot?#iefix) format('embedded-opentype'), 
     url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.woff2) format('x-woff2'), 
     url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.woff) format('woff'), 
     url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.ttf) format('truetype'); 
} 
@font-face { 
    font-family: 'Droid Arabic Naskh'; 
    font-style: normal; 
    font-weight: 700; 
    src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.eot); 
    src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.eot?#iefix) format('embedded-opentype'), 
     url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.woff2) format('x-woff2'), 
     url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.woff) format('woff'), 
     url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.ttf) format('truetype'); 
}

他們爲什麼做這樣的嗎？在CSS中添加多個webfonts有效嗎？我認爲每種字體大約是50Kb。在這種情況下緩存將如何工作？

感謝
納瓦爾·

來源

2013-04-03 Nawal

我不太確定如何解釋「多個網絡字體」，所以我會回答兩個可能性：

爲什麼有兩個相同字體的不同重量的字體文件？

這就是字體的工作方式。目前，所有主要字體文件類型僅支持每種文件1種字體或字體重量。

看Arial就是一個很好的例子。在像MS Word這樣的典型詞語編輯器中，你可能習慣於選擇bold來改變它的顯示，這看起來好像只是改變了你的字體，而不是轉換到一個全新的。但在幕後，它實際上是是加載完全獨立的字體文件。 Windows計算機附帶arial.ttf，arialbd.ttf，ariali.ttf等等，它們作爲集合組成Arial，Arial Bold，Arial Italic以及它們的所有組合。

通常，您必須爲每種字體加載的字體文件總數等於該字體所需的不同樣式的數量。

爲什麼Webfonts會爲每個給定的重量採集如此多的不同文件？

目前對font-face的瀏覽器支持受到限制，某些瀏覽器僅支持某些文件類型。這就是爲什麼你的每個字體重量都爲相同字體提供多種文件類型的原因。要深入瞭解瀏覽器對不同文件類型的支持情況，請訪問以下網址：check out this handy guide.

但是，當談到Web字體時，還有更多要說的。如果你恰巧是在考慮效率的程序員，你可能忽視了使用谷歌的建議執行情況的網絡字體，它看起來是這樣的：

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans|Lora|Roboto|Lobster+Two'>

你可能想將代碼從URL複製並粘貼到您的樣式表，希望通過刪除HTTP請求來減少頁面的加載時間。但這可能不一定是這種情況！

發生這種情況Google webfont服務器只會在您通過link元素調用時爲您提供需要的字體。

因此，舉個例子，如果您使用的是Firefox，則永遠不會爲.eot文件提供服務。它只給你在你的特定瀏覽器中工作的字體文件。最重要的是，調用webfont cdn的速度非常快。

更多關於如何工作的，請參考Google webfonts docs.

併爲您的其他問題：

是否附着在CSS多個網絡字體的效率？

它是最高效的嗎？那麼，不。爲了儘可能高效，請堅持用戶已在其機器上安裝的網頁安全字體。但從現在的互聯網速度來看，Google Webfonts加載的性能不應該引人注目，所以我不擔心它。

在這種情況下緩存將如何工作？

像往常一樣，瀏覽器將處理緩存。由於現在許多網站都在使用Google Web Fonts（尤其是Open Sans），因此用戶將字體緩存到其計算機上的可能性很大。

來源

2013-04-03 16:05:10 jmeas

恩，謝謝你的出色答案。但有一件事還有待回答，如果沒有元素使用該字體，將會**下載所有這些字體的鏈接**。如果是這樣，什麼時候會發生？ – Nawal

如果您使用'link'元素調用字體，則會爲您選擇的每種字體（和字體樣式）發送一個文件，而不管它是否被頁面上的元素實際使用。現在，有一個JavaScript API可以更直接地管理字體加載，所以如果您想阻止字體在您的頁面上未被調用時加載，您可以編寫一個腳本來使用該API以及一些其他Javascript。但我並不真的建議這樣做。 – jmeas

如果我正確理解你的問題那麼它不是這麼多，因爲它是各種效率..

的目的是爲了讓不同字體的面孔爲Droid Arabic Naskh FONT-FAMILY ...並非所有的字體系列都有font-face to represent each font-weight or related font-property，並且由於某些瀏覽器（Safari iOS，Chrome 25）可以雙斜體和雙粗體默認爲粗體/斜體的某些字形，因此添加這些規則可能會帶來風險。谷歌只是提供這個家庭的字體。這些是唯一可用的面孔。

字體也緩存同樣的方式與其他網絡資源被緩存

來源

2013-04-03 15:55:19 Adrift

在CSS中添加多個網頁字體

回答

爲什麼有兩個相同字體的不同重量的字體文件？

爲什麼Webfonts會爲每個給定的重量採集如此多的不同文件？

是否附着在CSS多個網絡字體的效率？

在這種情況下緩存將如何工作？

相關問題