Merriweather 的 font-stretch 为什么不生效，如何启用可变宽度？

2026-11-04数据阿明

结论

Merriweather 支持在网页中调节可变宽度。修正原示例需要同时调整字体请求和 CSS：在请求中加入有效的 wdth 范围，并为元素上的 font-stretch 数值加上 %。

Google Fonts 仓库中记录的 Merriweather wdth 范围是 87..112。请求时可以使用这个范围或其中的子范围；原来的 50..200 超出了字体支持的范围。字体轴元数据

原代码为什么没有效果？

1. font-stretch 缺少百分号

原示例中的两个 font-stretch 声明使用了裸数值：

font-stretch: 87.5;
font-stretch: 100;

裸数值不符合 font-stretch 的百分比语法，应改为：

font-stretch: 87.5%;
font-stretch: 100%;

浏览器会忽略这两个无效声明，因此它们无法指定预期的宽度。CSS 字体宽度语法

2. 原加载 URL 没有请求宽度变化范围

原请求列出了 ital,opsz,wght，没有包含 wdth。Google Fonts CSS API 对未指定的轴使用默认位置，所以该请求没有要求提供可调的宽度范围。若要在页面中连续调节宽度，需要明确请求 wdth 范围。Google Fonts CSS API 文档

3. 新增的 wdth 范围超出了字体能力

第二个 URL 加入了 wdth，请求的 50..200 却超出了 Merriweather 提供的 87..112 范围。这不符合轴值范围要求，可以解释这里出现的 The requested font families are not available. 报错。该报错不能直接说明 Merriweather 不支持宽度轴。

正确的加载与使用示例

下面的示例保留了原请求中的正体、斜体、光学尺寸和字重范围，并加入 wdth：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wdth,wght@0,18..144,87..112,300..900;1,18..144,87..112,300..900&amp;display=swap"
  >
  <style>
    h1 {
      font-family: "Merriweather", serif;
      font-size: 48px;
      font-weight: 400;
    }

    .narrow {
      font-stretch: 87.5%;
    }

    .normal {
      font-stretch: 100%;
    }

    .wide {
      font-stretch: 112%;
    }
  </style>
</head>
<body>
  <h1 class="narrow">Lorem ipsum</h1>
  <h1 class="normal">Lorem ipsum</h1>
  <h1 class="wide">Lorem ipsum</h1>
</body>
</html>

87.5% 在字体支持范围内，可以使用；100% 对应正常宽度。示例中的字号和字重相同，便于观察宽度差异。字体资源成功加载后，在支持可变字体的浏览器中应能看到宽度变化。

为什么手动修改返回的 CSS 也不行？

@font-face 中的 font-stretch 是字体匹配描述符，用来告诉浏览器字体资源可以提供哪些宽度。只修改这个描述符，无法为字体文件增加宽度变化数据，也无法恢复请求时没有提供的变化范围。

自行托管包含完整 wdth 轴的字体文件时，可以在 @font-face 中声明它的实际范围：

@font-face {
  font-family: "Merriweather Local";
  src: url("/fonts/merriweather-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 87% 112%;
  font-display: swap;
}

示例中的路径需要替换为实际文件位置，字体文件本身也必须包含所声明的变化轴。然后通过元素上的 font-stretch 选择宽度。字体描述符与变化范围

修正后仍无变化时怎么排查？

在开发者工具的 Network 面板确认字体样式表和字体文件请求成功，再检查返回的 @font-face 是否声明了预期的宽度范围。
查看元素实际渲染使用的字体，确认没有回退到 serif。
查看计算样式，确认 font-stretch 没有被其他规则覆盖，并检查是否存在显式设置 "wdth" 的 font-variation-settings。

如果已加载宽度轴数据，也可以临时直接设置轴值进行对照：

.narrow {
  font-variation-settings: "wdth" 87.5;
}

.wide {
  font-variation-settings: "wdth" 112;
}

font-variation-settings 中的轴值使用数字，不加 %。同一轴上的显式设置会覆盖高层字体属性对应的轴值，因此排查时应分别测试这两种写法，避免相互干扰。字体变化设置的优先级