只嵌入了一些google webfonts的字母

Question

我正在使用google的Roboto和Roboto Sans webfonts。阅读Google Developers Doc有一种方法来使用only embed certain letters整个网页的?text=customletters。

我已经生成了这两个嵌入链接：

<!-- whole roboto font -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<!-- only custom letters of roboto slab using text?= -->
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700?text=I%20am%20an%20example' rel='stylesheet' type='text/css'>

1）这对我在野生动物园中不起作用。我的代码有问题吗？

2）虽然，有没有办法将这两行组合起来，以避免在每个页面加载时向另一台服务器发出两个请求？

3）最后和最不重要的是，@import和link href嵌入方式是否会对性能产生任何影响？

JSFIDDLE DEMO

Answer 1

1）这对我在野生动物园中不起作用。我的代码有问题吗？

问题是你的GET参数。问号（qazxsw poi）分隔URL和GET参数。但是，每个单独的GET参数都用＆符号（qazxsw poi）分隔。

你使用了两个问号：

?

这是错误的，因为第二个将第一个GET参数（&）与第二个参数（

https://fonts.googleapis.com/css?family=Roboto+Slab:400,700?text=I%20am%20an%20example
                                ^                          ^

）分开，所以请使用＆符号：

family

2）虽然，有没有办法将这两行组合起来，以避免在每个页面加载时向另一台服务器发出两个请求？

谷歌字体可以用text分割，如下所示：

https://fonts.googleapis.com/css?family=Roboto+Slab:400,700&text=I%20am%20an%20example
                                ^                          ^

但是，如果你想要一种字体中的所有字符而只需要一种字体中的少数字符，则不可能。 |。

3）最后和最不重要的是，@ import和链接href嵌入方式是否会对性能产生任何影响？

https://fonts.googleapis.com/css?family=Inconsolata|Roboto
                                                   ^

阻止并行下载。

见StackOverflow: Optimizing Multiple Google Web Fonts

Answer 2

下载字体并使用FontForge（@import），在这个帖子中是一个教程StackOverflow: CSS: @import vs. <link href="">