2017-08-03 148 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'> 
相关问题