可变字体托管、语法以及为什么 Google 不提供用于自托管可变字体的 WOFF2 下载？

Question

我在这里不知所措。尝试将 google 变量 webfont (open sans) 添加到我的网站。

1. 选择字体时，谷歌仅创建<link>静态CSS 字体。为什么？（分号，没有“300..700”）

在网络上使用

要嵌入字体，请将代码复制到 html 中

[x] <link>    [ ] @import
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

用于指定族的 CSS 规则

font-family: 'Open Sans', sans-serif;

2. 整个页面上都没有 woff2 的下载（仅来自 API）。D/L 按钮仅适用于 .ttf。具有讽刺意味的是，在有关自托管的文章woff2中，他们使用了作为示例，即使他们不提供它。此外，甚至该字体的官方 GITHUB页面也只提供 .ttf。为什么？

3. 其他来源提供了各种格式的静态文件（但我在那里没有看到可变的文件），另一个线程中的 ppl 甚至发布了他们自己的工具，例如：

• https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin
• https://www.axllent.org/code/google-font-downloader/
• https://github.com/google/fonts/tree/main/ofl/opensans
• 如何从（官方）Google Web Fonts 存储库下载多种格式的网络字体？

4. 折腾了一整天，终于找到了这个。还提到了另一个（官方）工具，用于将 ttf 转换为 woff2，这对于可变字体来说似乎不容易实现。SRSLY？这是唯一的方法吗？为什么没有任何文档？（好吧，也许我应该从 API 中获取 woff2，但我注意到浏览器之间存在差异，我认为例如 Opera gets 仅提供静态类型而不是变量类型。）

5. “好的”API 就是为此服务的。但它只使用format('woff2')：

但我读过，对于可变字体，语法应该更像这样，使用format('woff2 supports variations')andformat('woff2-variations')和@supports (font-variation-settings: normal)。为什么谷歌不使用这种语法？现在哪个更好？

谷歌：

/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.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;
}

应该如何完成：

@font-face {
    font-family: Asap;
    src: url('/fonts/Asap-VariableFont_wght.woff2') format('woff2 supports variations'),
         url('/fonts/Asap-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-display: swap;
    font-style: normal;
}

旁注：从谷歌页面我需要手动更改

    https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..0,800;1,300..1,800&display=swap

到

https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap

甚至获得可变字体。