您如何使用 Google 字体使用可变字体的 3 个轴？答案

【问题标题】：How do you use 3 axes of a variable font using Google Fonts?您如何使用 Google 字体使用可变字体的 3 个轴？
【发布时间】：2021-10-28 20:50:27
【问题描述】：

我的目标是启用由 Google Fonts 提供的 Piazzolla 可变字体的光学尺寸轴。 Piazzolla 的 3 个轴是 ital、wght 和 opsz。如果您不熟悉光学尺寸，Piazzolla specimen site 上有一个开关可以将其关闭和打开。

现在，当您在 Google 字体上浏览可变字体时，许多功能和坐标轴都被隐藏了。当您选择一种字体来获取导入代码时，它不包含某些功能。缺少一些轴。您必须阅读 Google css2 API documentation 和 available axes 并尝试自己弄清楚。

有一个 CSS Tricks article ，但使用了不同的字体，递归。我尝试使用其中的一些示例，但 Piazzolla 字体无法加载，或者斜体无法加载，或者所有的权重都无法加载。

这是一个供大家使用的代码笔：https://codepen.io/drw158/pen/BaZogRx

这是一个导入 url 的示例（没有 opsz 轴）：

https://fonts.googleapis.com/css2?family=Piazzolla:ital,wght@0,100..900;1,100..900&display=swap

您如何知道是否启用了光学尺寸测量？如果您能够包含opsz 轴和所有权重（100-900）的斜体负载，那么您可能已经解决了它。确保您没有在本地安装字体（或者您可以这样做以查看光学尺寸的外观）。

谢谢！

【问题讨论】：

【解决方案1】：

（我是 Google Fonts 的首席用户体验计划和运营经理，但我是以个人身份回答的；这不是公司的官方声明）

它对我有用。这是您的笔叉，显示手动和自动设置的光学尺寸，罗马和斜体：

https://codepen.io/davelab6/pen/eYRJeqp

我使用的字体 API URL 是

https://fonts.googleapis.com/css2?family=Piazzolla:ital,opsz,wght@0,8..30,100..900;1,8..30,100..900&display=swap

我的猜测是您没有按字母顺序排列轴，或者您没有将 opsz 轴范围添加到罗马和斜体元组中。

如https://design.google/library/variable-fonts-are-here-to-stay/中所述

Firefox DevTools 具有出色的可变字体交互式检查工具，因此如果您不确定已加载字体中的轴是什么，您可以交互式地使用它们。

【讨论】：