Javascript 只嵌入一些google webfonts的字母

我正在使用谷歌的

Roboto

和

robotosans

webfont。通过使用

？text=customletters

，可以读取整个webfont的格式

我已生成以下两个嵌入链接：

<!-- 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）这对我在safari中不起作用。我的代码有问题吗

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

3）最后也是最不重要的一点是，

@import

和

link href

嵌入方式是否会对性能产生任何影响

1）这对我在safari中不起作用。我的代码有问题吗

问题是您的GET参数。问号（

？

）分隔URL和GET参数。但是，每个GET参数都用一个符号（

&

）分隔

您使用了两个问号：

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

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

family

）与第二个GET参数（

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
                                                   ^

但是因为您希望所有字符都在一种字体中，而只有少数字符在第二种字体中，所以这是不可能的

3）最后也是最不重要的一点，@import和link href嵌入方式在性能上有什么不同吗

@import

阻止并行下载

---

请参见下载字体并使用FontForge（），此线程中有一个教程

为什么只想加载一些字母？我不认为这是出于表演的原因？是的！我想实现它，以避免图像搜索引擎优化的原因，但我只需要10个字母的整个字体。节省大约90%的webfonts大小。非常感谢，这是一个很好且清晰的答案。我很难找到你发布的堆栈线程，它们非常有用@玛丽安瑞克，不客气。第一个是通过google

google multiple font text

找到的，第二个是通过google

link href vs@import

找到的。谷歌比你好得多。谷歌让我下载字体。。。明白了——“你可以下载字体，将它们用于你的模型，在你的文档中，或者在你自己的服务器上托管它们。”。不过，它仍然不会使用谷歌CDN。