Merriweather谷歌字体嵌入后font-stretch属性失效问题咨询

问题 #

Merriweather字体在Google Fonts页面显示支持可变宽度，能在站点内测试效果，但嵌入网页后font-stretch属性完全无效。测试代码如下：

<!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>

尝试在字体引入URL中添加wdth参数：

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

但访问该URL时提示“请求的字体系列不可用”，字体完全无法显示。手动复制CSS修改font-stretch值也没有效果。想问这个字体嵌入后到底支不支持可变宽度？如果不支持，怎么实现Google Fonts页面展示的可变宽度效果？

解答 #

核心结论 #

Merriweather的可变字体版本仅包含字重（wght）和光学尺寸（opsz）两个轴，根本不支持宽度（wdth）轴。Google Fonts页面展示的“可变宽度”效果，是用该字体的静态宽度变体（比如Merriweather Condensed）模拟出来的，并非真正的可变宽度轴控制。

实现类似效果的方法 #

直接使用Merriweather的静态宽度变体系列：

1. 在引入字体时，同时添加Merriweather Condensed（窄版）或其他宽度变体的声明
2. 页面中通过指定不同的字体系列来切换宽度效果

示例代码：

<!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&family=Merriweather+Condensed:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
  </head>
  <body>
    <h1 style="font-family: 'Merriweather Condensed'; font-weight: 700;">Lorem ipsum（窄版）</h1>
    <h1 style="font-family: Merriweather; font-weight: 700;">Lorem ipsum（标准版）</h1>
  </body>
</html>

为什么之前的尝试无效？ #

• 添加wdth参数后报错：因为Merriweather的可变字体包没有宽度轴，Google Fonts无法识别这个非法参数，直接返回请求失败。
• font-stretch属性无效：这个属性只对两种字体生效——一是包含wdth轴的可变字体，二是自带对应静态拉伸变体的字体。Merriweather标准版既没有wdth轴，也无法通过该属性切换到Condensed变体，所以完全没效果。

内容的提问来源于stack exchange，提问作者not without text