9

我在一个项目中使用了三种 Google 字体，其中前两种用于标题和常规文本，第三种仅用于菜单。所以，在菜单中，我只使用了一组字母，全部大写。当我导入谷歌字体“css”时，如果我只调用我需要的字母，使用 URL 中的“text”变量，我可以将第三种字体的大小减小 85%：

@import url(http://fonts.googleapis.com/css?family=Happy+Monkey&text=HOMECONTACT);

这很好，但是当我将其他字体添加到这个 URL 时（为了保存调用），“text”变量会影响 URL 中的所有字体。因此，解决方案是再调用一次并分别请求字体，如下所示：

@import url(http://fonts.googleapis.com/css?family=Happy+Monkey&text=HOMECONTACT);
@import url(http://fonts.googleapis.com/css?Marcellus+SC|Open+Sans+Condensed:300);

现在，我想做的是在一次调用中检索所有字体，但只检索一种特定字体的一组字符。换句话说，将之前的调用合并为一个。阅读谷歌字体 API，我认为这是不可能的，但我仍然在问是否有人知道这个解决方案。

先感谢您！

4

3 回答 3

2

还没有办法做到这一点。可能是因为优化的字体请求仍处于测试阶段。

我建议在 中使用请求，<head>而不是在 CSS 中使用@import. 从页面速度的角度来看，CSS 文件中的 @import 几乎不应该被使用，因为它可以防止样式表被同时下载。如果在主 HTML 页面的元素中引用了两个样式表<link>，则可以同时下载这两个样式表。

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Happy+Monkey&text=HOMECONTACT">
<link rel="stylesheet" href="//fonts.googleapis.com/css?Marcellus+SC|Open+Sans+Condensed:300">

即使再有一个请求，页面的加载速度也会比@import.

于 2014-04-23T13:39:28.143 回答
0

虽然我们目前仅限于多个请求，但服务工作者可以缓存这两个响应，以便在后续页面加载时立即解决它们。

于 2016-07-29T16:59:42.433 回答
-1

As of right now (April 2020) , You can do this. https://developers.google.com/fonts/docs/css2#optimizing_your_font_requests

于 2020-04-09T03:50:26.967 回答