如何在Google Fonts中使用Piazzolla可变字体三轴并启用opsz光学尺寸轴

正确配置方式 #

第一步：修改字体导入链接 #

将你原有的Google Fonts导入链接替换为以下版本，已经包含ital（斜体）、wght（字重100_{900）、`opsz`（光学尺寸8}32）全可变轴支持：

• HTML引入写法：

<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=Piazzolla:ital,opsz,wght@0,8..32,100..900;1,8..32,100..900&display=swap" rel="stylesheet">

• CSS @import写法：

@import url('https://fonts.googleapis.com/css2?family=Piazzolla:ital,opsz,wght@0,8..32,100..900;1,8..32,100..900&display=swap');

第二步：开启光学尺寸适配 #

在使用该字体的CSS规则中添加以下配置即可启用自动光学尺寸适配，浏览器会根据当前字体大小自动匹配最优的光学尺寸效果：

.text {
  font-family: 'Piazzolla', serif;
  /* 自动适配光学尺寸 */
  font-optical-sizing: auto;
  /* 也可以手动固定光学尺寸值，示例如下 */
  /* font-variation-settings: 'opsz' 14; */
}

验证配置生效 #

按照以下步骤确认所有功能正常：

1. 先卸载或临时禁用本地安装的Piazzolla字体，避免本地字体干扰测试结果
2. 验证字重：设置font-weight属性从100到900的整数值，所有字重都能正常渲染没有降级
3. 验证斜体：设置font-style: italic，斜体样式正常加载
4. 验证光学尺寸：分别设置12px以下的小字号和72px以上的大字号，小字号下笔画更清晰不会糊，大字号下衬线细节更丰富，即代表光学尺寸轴生效

内容的提问来源于stack exchange，提问作者davecave