2017-08-03 43 views
1

我想要一次性導入所有谷歌網頁字體, 我測試了我的頭標籤中的常規'鏈接rel',以便在本頁導入我的帖子的家庭蜜桔 http://expocreek.com/site_privacy.xhtml 並且完美運行。 雖然我想要一種可以導入所有可用字體的方式,所以我可以在任何時候使用它們,我是否必須逐一寫入它們,或者是否有任何完整的嵌入式鏈接rel。 Pease幫助我。我怎樣才能一次導入所有的谷歌字體?

+2

實際上,您不能從字體庫導入每一種字體。你將不得不選擇你想使用哪一個。我想念你的問題嗎? –

+0

您只能從fonts.google.com中選取所有字體 – Gabsii

回答

3

嗯,它會導致一個非常大的文件被導入,谷歌可能甚至不允許它,但我想你可以從列表中選擇每一種字體。我已經選擇了101種字體,看起來工作正常。

轉到https://fonts.google.com/並開始點擊每一個單,字體,每單,字體粗細(更好地得到一些食物和飲料準備好了,這可能需要一兩天),谷歌將提供一個<link href="https://fonts.googleapis.com/css?family=與附加的所有字體。將此添加到您的頁面,然後您可以使用任何字體名稱爲元素定義font-family

/* 
 
font-family: 'Roboto', sans-serif; 
 
font-family: 'Zilla Slab Highlight', cursive; 
 
font-family: 'Open Sans', sans-serif; 
 
font-family: 'Spectral', serif; 
 
font-family: 'Slabo 27px', serif; 
 
font-family: 'Lato', sans-serif; 
 
font-family: 'Roboto Condensed', sans-serif; 
 
font-family: 'Oswald', sans-serif; 
 
font-family: 'Source Sans Pro', sans-serif; 
 
font-family: 'Raleway', sans-serif; 
 
font-family: 'Zilla Slab', serif; 
 
font-family: 'Montserrat', sans-serif; 
 
font-family: 'PT Sans', sans-serif; 
 
font-family: 'Roboto Slab', serif; 
 
font-family: 'Merriweather', serif; 
 
font-family: 'Saira Condensed', sans-serif; 
 
font-family: 'Saira', sans-serif; 
 
font-family: 'Open Sans Condensed', sans-serif; 
 
font-family: 'Saira Semi Condensed', sans-serif; 
 
font-family: 'Saira Extra Condensed', sans-serif; 
 
font-family: 'Julee', cursive; 
 
font-family: 'Archivo', sans-serif; 
 
font-family: 'Ubuntu', sans-serif; 
 
font-family: 'Lora', serif; 
 
font-family: 'Manuale', serif; 
 
font-family: 'Asap Condensed', sans-serif; 
 
font-family: 'Faustina', serif; 
 
font-family: 'Cairo', sans-serif; 
 
font-family: 'Playfair Display', serif; 
 
font-family: 'Droid Serif', serif; 
 
font-family: 'Noto Sans', sans-serif; 
 
font-family: 'PT Serif', serif; 
 
font-family: 'Droid Sans', sans-serif; 
 
font-family: 'Arimo', sans-serif; 
 
font-family: 'Poppins', sans-serif; 
 
font-family: 'Sedgwick Ave Display', cursive; 
 
font-family: 'Titillium Web', sans-serif; 
 
font-family: 'Muli', sans-serif; 
 
font-family: 'Sedgwick Ave', cursive; 
 
font-family: 'Indie Flower', cursive; 
 
font-family: 'Mada', sans-serif; 
 
font-family: 'PT Sans Narrow', sans-serif; 
 
font-family: 'Noto Serif', serif; 
 
font-family: 'Bitter', serif; 
 
font-family: 'Dosis', sans-serif; 
 
font-family: 'Josefin Sans', sans-serif; 
 
font-family: 'Inconsolata', monospace; 
 
font-family: 'Bowlby One SC', cursive; 
 
font-family: 'Oxygen', sans-serif; 
 
font-family: 'Arvo', serif; 
 
font-family: 'Hind', sans-serif; 
 
font-family: 'Cabin', sans-serif; 
 
font-family: 'Fjalla One', sans-serif; 
 
font-family: 'Anton', sans-serif; 
 
font-family: 'Cairo', sans-serif; 
 
font-family: 'Playfair Display', serif; 
 
font-family: 'Droid Serif', serif; 
 
font-family: 'Noto Sans', sans-serif; 
 
font-family: 'PT Serif', serif; 
 
font-family: 'Droid Sans', sans-serif; 
 
font-family: 'Arimo', sans-serif; 
 
font-family: 'Poppins', sans-serif; 
 
font-family: 'Sedgwick Ave Display', cursive; 
 
font-family: 'Titillium Web', sans-serif; 
 
font-family: 'Muli', sans-serif; 
 
font-family: 'Sedgwick Ave', cursive; 
 
font-family: 'Indie Flower', cursive; 
 
font-family: 'Mada', sans-serif; 
 
font-family: 'PT Sans Narrow', sans-serif; 
 
font-family: 'Noto Serif', serif; 
 
font-family: 'Bitter', serif; 
 
font-family: 'Dosis', sans-serif; 
 
font-family: 'Josefin Sans', sans-serif; 
 
font-family: 'Inconsolata', monospace; 
 
font-family: 'Bowlby One SC', cursive; 
 
font-family: 'Oxygen', sans-serif; 
 
font-family: 'Arvo', serif; 
 
font-family: 'Hind', sans-serif; 
 
font-family: 'Cabin', sans-serif; 
 
font-family: 'Fjalla One', sans-serif; 
 
font-family: 'Anton', sans-serif; 
 
font-family: 'Acme', sans-serif; 
 
font-family: 'Archivo Narrow', sans-serif; 
 
font-family: 'Mukta Vaani', sans-serif; 
 
font-family: 'Play', sans-serif; 
 
font-family: 'Cuprum', sans-serif; 
 
font-family: 'Maven Pro', sans-serif; 
 
font-family: 'EB Garamond', serif; 
 
font-family: 'Passion One', cursive; 
 
font-family: 'Ropa Sans', sans-serif; 
 
font-family: 'Francois One', sans-serif; 
 
font-family: 'Archivo Black', sans-serif; 
 
font-family: 'Pathway Gothic One', sans-serif; 
 
font-family: 'Exo', sans-serif; 
 
font-family: 'Vollkorn', serif; 
 
font-family: 'Libre Franklin', sans-serif; 
 
font-family: 'Crete Round', serif; 
 
font-family: 'Alegreya', serif; 
 
font-family: 'PT Sans Caption', sans-serif; 
 
font-family: 'Alegreya Sans', sans-serif; 
 
font-family: 'Source Code Pro', monospace; 
 
*/
<link href="https://fonts.googleapis.com/css?family=Abel|Abril+Fatface|Acme|Alegreya|Alegreya+Sans|Anton|Archivo|Archivo+Black|Archivo+Narrow|Arimo|Arvo|Asap|Asap+Condensed|Bitter|Bowlby+One+SC|Bree+Serif|Cabin|Cairo|Catamaran|Crete+Round|Crimson+Text|Cuprum|Dancing+Script|Dosis|Droid+Sans|Droid+Serif|EB+Garamond|Exo|Exo+2|Faustina|Fira+Sans|Fjalla+One|Francois+One|Gloria+Hallelujah|Hind|Inconsolata|Indie+Flower|Josefin+Sans|Julee|Karla|Lato|Libre+Baskerville|Libre+Franklin|Lobster|Lora|Mada|Manuale|Maven+Pro|Merriweather|Merriweather+Sans|Montserrat|Montserrat+Subrayada|Mukta+Vaani|Muli|Noto+Sans|Noto+Serif|Nunito|Open+Sans|Open+Sans+Condensed:300|Oswald|Oxygen|PT+Sans|PT+Sans+Caption|PT+Sans+Narrow|PT+Serif|Pacifico|Passion+One|Pathway+Gothic+One|Play|Playfair+Display|Poppins|Questrial|Quicksand|Raleway|Roboto|Roboto+Condensed|Roboto+Mono|Roboto+Slab|Ropa+Sans|Rubik|Saira|Saira+Condensed|Saira+Extra+Condensed|Saira+Semi+Condensed|Sedgwick+Ave|Sedgwick+Ave+Display|Shadows+Into+Light|Signika|Slabo+27px|Source+Code+Pro|Source+Sans+Pro|Spectral|Titillium+Web|Ubuntu|Ubuntu+Condensed|Varela+Round|Vollkorn|Work+Sans|Yanone+Kaffeesatz|Zilla+Slab|Zilla+Slab+Highlight" rel="stylesheet">

的備用,和更高性能的解決方案,可能是使用的Google Web Font Loader它允許您通過JS加載任何的谷歌字體。這將允許您加載ANY的Google字體,無需加載全部的Google字體。

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"> </script> 
<script> 
    WebFont.load({ 
    google: { 
     families: ['Any Google Font'] 
    } 
    }); 
</script> 
0

使用來自谷歌字體庫的字體基本上是添加樣式表每次下載到您的網頁每一次需要您的網站負載。

沒有捷徑可以下載全部谷歌字體到一個單一的網站,因爲當您的網頁被訪問時,下載的CSS數量巨大無效並不是最好的解決方案。專業網站開發人員爲每個網站都有一個特定的字體堆棧,並且只包含該頁面中使用的特定字體。這是我的建議。

0

您可以加載多個谷歌字體,但您必須爲要導入的每種字體定義字體系列。您需要使用'|'分隔每個字體字符。

<link href='//fonts.googleapis.com/css?family=Brawler|Ubuntu|Righteous' rel='stylesheet' type='text/css'>