Merriweather谷歌字体在font-stretch属性下不起作用

前端开发 2026-07-10

在Merriweather的 Google字体页面上，它显示有一个可在站点上测试的可变宽度。但当我把字体嵌入到网站中时，却没有这个选项：

<!DOCTYPE html>
<html lang="en">
  <head>
    <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=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap" rel="stylesheet">
  </head>
  <body>
    <h1 style="font-family: Merriweather; font-stretch: 87.5">Lorem ipsum</h1>
    <h1 style="font-family: Merriweather; font-stretch: 100">Lorem ipsum</h1>
  </body>
</html>

两行 Lorem ipsum，使用风格完全一致的 Merriweather 字体

我也尝试在URL中加入width参数，如下所示：

https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wdth,wght@0,18..144,50..200,300..900;1,18..144,50..200,300..900&display=swap

但结果只是让Merriweather完全不显示，访问该URL时会出现“The requested font families are not available.”的提示。

我也尝试复制CSS，手动将 font-stretch: 100% 改为 font-stretch: 50%，但这也没有改变任何结果。

该字体在嵌入时就不支持可变宽度吗？如果确实如此，是否有办法实现Google字体页面所展示的可变宽度？

解决方案

你遇到了多重问题：

你的第一个查询未包含 wdth（宽度）轴：

https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap

可工作的查询URL

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&display=swap

Google字体API不容忍错误：

一个微小的语法错误就会导致整个查询返回400。

因此强烈建议始终在浏览器中测试这些，看看它是否有效。

你也可以通过Google字体网页UI获取这个URL，但默认情况下 wdt 通常是禁用的。请确保宽度轴滑块也已启用。

`font-stretch` 语法

也要确保 font-stretch 的取值有效：

该属性需要一个 % 单位
请保持在提供的范围内，例如 87.5–112%。轴范围值没有统一标准。超过该范围的取值可能导致渲染问题

值得注意的是：font-stretch 将被替换为 font-width 属性名。然而，浏览器放弃对 font-stretch 的支持的可能性很小。

/* latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 87% 112%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/merriweather/v33/u-440qyriQwlOrhSvowK_l5-fCZMdeP3r9Ho.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

<!--
<link 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&display=swap" rel="stylesheet">
-->


<h1 style="font-family: Merriweather; font-stretch: 87.5%">Lorem ipsum</h1>
<h1 style="font-family: Merriweather; font-stretch: 100%">Lorem ipsum</h1>
<h1 style="font-family: Merriweather; font-stretch: 112%">Lorem ipsum</h1>