谷歌字體中的「文本」變量的選擇性使用

我在一個項目中使用三個Google字體，其中兩個第一個用於標題和常規文本，第三個用於菜單。所以，在菜單中，我只使用一組字母，全部大寫。當我導入谷歌字體「CSS」我可以減少85％的第三字體的大小，如果我只叫我需要的字母，在網址中使用「文本」變量：谷歌字體中的「文本」變量的選擇性使用

@import url(http://fonts.googleapis.com/css?family=Happy+Monkey&text=HOMECONTACT);

這是偉大的，但是當我將其他字體添加到此URL（爲了保存調用）時，「text」變量會影響URL中的所有字體。所以，解決的辦法是要消耗一個多個呼叫並分別索要字體，像這樣：

@import url(http://fonts.googleapis.com/css?family=Happy+Monkey&text=HOMECONTACT); 
@import url(http://fonts.googleapis.com/css?Marcellus+SC|Open+Sans+Condensed:300);

現在，我願意做的事情，是獲取所有的字體在一個電話，但只有一個一組特定字體的字符集。換句話說，將之前的呼叫合併爲一個。閱讀谷歌字體API，我認爲這是不可能的，但我仍然問，如果有人知道這個解決方案。

預先感謝您！

來源

2013-08-29 Diego

現在還沒有辦法做到這一點。也許是因爲優化的字體請求仍處於測試階段。

我推薦的是使用<head>中的請求，而不是在@import內部使用CSS。從頁面速度的角度來看，CSS文件中的@import幾乎不會被使用，因爲它可以防止同時下載樣式表。如果在主HTML頁面中的<link>元素中引用了這兩個樣式表，則可以同時下載這兩個樣式表。

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Happy+Monkey&text=HOMECONTACT"> 
<link rel="stylesheet" href="//fonts.googleapis.com/css?Marcellus+SC|Open+Sans+Condensed:300">

即使多一個請求時，頁面會加載比@import更快。

來源

2014-04-23 13:39:28 edmundo

雖然我們當前僅限於多個請求，但服務工作人員可以緩存這兩個響應，以便在隨後的頁面加載時立即解析它們。

來源

2016-07-29 16:59:42

谷歌字體中的「文本」變量的選擇性使用

回答

相關問題