css - 在网页中导入许多谷歌字体

Question

例如，假设我像这样导入 50 种字体:

@import url("http://fonts.googleapis.com/css?family=Lora|Droid+Sans|Roboto...");

.font-lora{
   font-family: "Loral";
}

.font-droid-sans{
   font-family: "Droid Sans";
}

.font-roboto{
   font-family: "Roboto";
}

...

但页面中只使用了其中的 2 或 3 个类。

我的问题是，在网页上导入那么多字体是否有任何不明显的副作用，实际上只有 2-3 种会被实际使用。

据我了解，只有当页面上的元素具有样式时，浏览器才会请求字体。对吧？

我这样做是作为允许用户选择字体的界面的一部分，我注意到更改类比切换样式表要顺畅得多

Answer 1

是/否。 IE 将全部加载它们，因为您使用的是@import，浏览器将伸出手并获取该文件。不要加载您不使用的字体，因为这些是额外的请求。这是google says :

This may seem obvious, but if you don't actually use a font, don't request it in the API. You might miss this if you do your testing in Firefox or Chrome, which only load the font files needed to render the text on the page. Internet Explorer, by contrast, loads all the fonts requested, even if they’re not actually used.

此外，您最好下载所有这些字体，然后将它们全部加载，这样它们就可以根据请求在服务器上。