如何将文本参数与谷歌字体 API 一起用于一种字体类型

Question

我正在使用 2 个 google 字体系列并将它们声明为：

<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700|Roboto:300,400,700&display=swap" rel="stylesheet">

我想添加一个字体系列 (Parisienne)，我只需要 & 字符 (&)。我知道这可以使用“文本”参数 (https://developers.google.com/fonts/docs/getting_started) 来完成。

但是，如果可能的话，我想将它添加到现有的链接标签中。我尝试了以下方法：

<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700|Roboto:300,400,700|Parisienne&text=%26&display=swap" rel="stylesheet">

但这样做似乎将逻辑写为“加载所有 3 个字体系列，但只加载每个字体的 & 字符”。这是意料之中的，但我至少想尝试一下。我对此进行了测试，实际上每种字体中唯一有效/下载的字符是＆符号

为了让它工作，我有 2 个单独的链接元素：

<link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700|Roboto:300,400,700&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Parisienne&text=%26&display=swap" rel="stylesheet">

有没有什么方法可以只使用一个链接标签并让它加载整个 Roboto 和 Monteserrat 家族以及 Parisienne 家族的 & 字符？如果没有，那么有 2 个单独的链接标签就可以了，但如果有任何方法可以只用一个链接标签来做到这一点，那么知道如何做会很好。

Answer 1

我很确定您已经解决了这个问题。 但是，如果有人在这里有同样的问题：

答案

是的，我们可以做到。

怎么做

我们需要在 Google Fonts 提供的链接（来自 <link> 或 @import）上添加编码字符作为 text 参数的值。它将一次返回指定字符集所需的所有@font-faces。

为了防止字符破坏 url，我们可以使用 JavaScript 中的encodedURIComponent。

示例

编码字符：

encodeURIComponent('&');
// --> '%26'

制作网址：

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;700&family=Roboto:wght@300;400;700&display=swap&text=%26" rel="stylesheet">

来自 Google 字体的回应：

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/l/font?kit=JTUSjIg1_i6t8kCHKm45xWtzzyg&skey=7bc19f711c0de8f&v=v21) format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/l/font?kit=JTUSjIg1_i6t8kCHKm45xWtzzyg&skey=7bc19f711c0de8f&v=v21) format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/l/font?kit=JTUSjIg1_i6t8kCHKm45xWtzzyg&skey=7bc19f711c0de8f&v=v21) format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/l/font?kit=JTUSjIg1_i6t8kCHKm45xWtzzyg&skey=7bc19f711c0de8f&v=v21) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/l/font?kit=KFOlCnqEu92Fr1MmSU5vBgU8DA&skey=11ce8ad5f54705ca&v=v29) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/l/font?kit=KFOmCnqEu92Fr1Me4H5OJQ&skey=a0a0114a1dcab3ac&v=v29) format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/l/font?kit=KFOlCnqEu92Fr1MmWUlvBgU8DA&skey=c06e7213f788649e&v=v29) format('woff2');
}

查看here。