Google 字体的静态 URL

Question

我正在尝试将 Google 字体与 JavaScript 和 HTML 画布结合使用。我找到了一种可行的方法，但它要求我使用静态 URL 引用 Google 字体：

let googleFont = new FontFace(
    "Lato",
    "url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2)"
);

我在其他 Stack Overflow 帖子中看到过这些静态 URL，但我不知道在 Google Fonts 工具中哪里可以找到它们。

有人知道在哪里为任何 Google 字体生成这些 URL 吗？

编辑：我知道我可以下载并托管字体，但我想直接从 Google 加载字体。

编辑：我不想使用 @import、LINK 或 fonts.googleapis.com 方法。我需要使用

fonts.gstatic.com

URL 进行参考。

Answer 1

1. 转到谷歌字体并找到您要使用的字体
2. 在“在网络上使用”侧栏中找到 css 链接，例如”“
3. 在浏览器中加载 css url，例如https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap
4. 在加载的 css 中找到 url，例如https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuGKYAZ9hjp-Ek-_EeA.woff

Answer 2

性能几乎没有受到影响，但这是肯定的。您可以在此处阅读有关潜在冷启动性能的更多信息：

以下是获取 URL 的方法：

curl -X GET "<your_fonts.googleapis.com_url>"

但仅此一项就可以为您提供 TTF 版本。

gstatic 命名空间正是在 Google 服务器上托管的位置。 将为您返回哪种字体

fonts.googleapis.com

取决于您的

user-agent

。

因此，为了获取

woff2

文件，您需要执行以下操作：

// https://fonts.googleapis.com/css?family=Lato:400

$ curl -X GET --user-agent "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36" "https://fonts.googleapis.com/css?family=Lato:400"

退货：

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Answer 3

明白了！如果您正在寻找 Google Font 的静态 URL，最好的方法是下载字体文件并自行托管它们，因为 Google Fonts 不提供直接的静态 URL。如果您想了解更多详细信息，请告诉我！https://cavamenudallas.com/

此外，请随时查看 Cava Menu Dallas 以获取数字菜单见解！

Answer 4

如果其他人正在寻找相同的信息，我发现找到静态字体 URL 的最简单方法是使用 Google Fonts API 打开相关字体的链接：

https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900,100italic,300italic,400italic,500italic,700italic,900italic,100

或者：

https://fonts.googleapis.com/css?family=Lato:400

此 API 端点中包含所有静态字体 URL，例如：

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOiCnqEu92Fr1Mu51QrEzAdL-vwnYg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}