如何在 Google 字体中使用可变字体？答案

【问题标题】：How do I use variable fonts with Google Fonts?如何在 Google 字体中使用可变字体？
【发布时间】：2022-01-25 05:07:19
【问题描述】：

与每个粗细（300、400、500 等）需要一个文件的传统字体不同，可变字体允许您通过单个（较小的）字体文件访问字体粗细和样式的每个组合。这对网络有明显的好处，我正在尝试使用来自 Google Fonts 的Inter 字体，Google 和设计师的网站都声称它是可变字体。

但是，当在 Google 字体中选择字体时，我仍然需要选择我想要使用的单个权重，并且生成的 <link> 标记还指定了单个权重，这表明它正在下载这些文件中的每一个：

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600&display=swap" rel="stylesheet">

我还注意到它似乎没有斜体，当我尝试渲染斜体时，它会用假斜体模拟它们，我通过添加 CSS 规则 font-synthesis:none 确认了这一点：

font-style: italic;
font-synthesis: none ; /* Disables faux italics and other simulated styles: 
                          if no italic style is installed, defaults to normal

为什么会这样，如何通过 Google 字体使用可变版本的 Inter，包括斜体？

【问题讨论】：

标签： css fonts google-fonts variable-fonts

【解决方案1】：

Google Fonts 允许您在 Variable axes 部分选择一个非标准值，但您仍然需要输入该值，因为 google 提供较小和特定的文件以避免大请求，它还近似它们。

例如，通过选择 401 和 410，您会得到完全相同的文件作为响应（唯一的区别是样式中的 font-weight）。

检查它们：

Inter 似乎没有斜体字。

【讨论】：

什么是可变轴部分？我似乎在 Inter 的 Google 字体页面上的任何地方都找不到它。
至于 Inter 没有斜体，这对于为什么该页面上没有显示斜体样式是有道理的，尽管发现如此流行的字体没有真正的斜体很烦人。

【解决方案2】：

Google 字体确实允许您在网站中加载可变字体，而不是特定的权重。有关详细信息，请参阅：

https://fonts.google.com/knowledge/using_type/loading_variable_fonts_on_the_web

【讨论】：