仅嵌入 google webfonts 的部分字母

Question

我正在使用 google 的 Roboto 和 Roboto Sans 网络字体。使用 ?text=customletters.

读取整个网络字体的 Google Developers Doc there is a way to only embed certain letters

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

<!-- 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 嵌入方式对性能有影响吗？

JSFIDDLE DEMO

Answer 1

1) This does not work for me in safari. Is there something wrong with my code?

问题出在您的 GET 参数上。问号 (?) 分隔 URL 和 GET 参数。不过，每个单独的 GET 参数都用一个符号 (&) 分隔。

您使用了两个问号：

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

这是错误的，因为第二个将第一个 GET 参数 (family) 与第二个 GET 参数 (text) 分开，因此请改用 & 符号：

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

2) Although, is there a way to combine these two lines, to avoid two requests to another server on each page load?

Google 字体可以用 | 拆分，如下所示：

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

HOWEVER 因为您希望所有字符都使用一种字体，而只有少数字符使用另一种字体，那么这是不可能的。 Whosebug: Optimizing Multiple Google Web Fonts.

3) Last and least, does the @import and link href way of embedding make any difference in performance?

@import 阻止并行下载。

见Whosebug: CSS: @import vs. <link href="">

Answer 2

下载字体并使用FontForge (https://fontforge.github.io/en-US/), in this thread is a tutorial how to remove characters from a font file?

仅嵌入 google webfonts 的部分字母

Embed only some letters of google webfonts

javascript

webfonts

google-webfonts