只嵌入了一些google webfonts的字母

Question

我正在使用谷歌Roboto和Roboto Sanswebfonts.阅读Google Developers Doc,有一种方法只能嵌入整个webfont的某些字母?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参数.questionmark(?)分隔URL和GET参数.但是,每个单独的GET参数都用&符号(&)分隔.

你使用了两个问号:

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

这是错误的,因为第二个将第一个GET参数(family)与第二个(text)分开,所以请使用&符号:

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

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

谷歌字体可以|像这样拆分:

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

但是,如果你想要一种字体中的所有字符而只需要一种字体中的少数字符,则不可能.StackOverflow:优化多个Google Web字体.

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

@import 阻止并行下载.

请参阅StackOverflow:CSS:@import vs. <link href ="">