“可变粗细”版本的 TTF 字体在浏览器中不起作用答案

【问题标题】："Variable weight" version of a TTF font not working in browser“可变粗细”版本的 TTF 字体在浏览器中不起作用
【发布时间】：2022-09-27 12:44:54
【问题描述】：

我需要导入字体（特别是在我的应用程序的 TTF 中），我从https://fonts.google.com/specimen/Montserrat 页面选择了“可变重量”版本，按钮“下载系列”。这个可变重量版本称为“Montserrat-VariableFont_wght.ttf”。

为什么font-weight 在这里不起作用？只有 2 个权重：正常和粗体，而不是所有的可变权重。为什么？

*_VariableFont_wght.ttf vesion 的目的不就是具有可变权重吗？

@font-face { font-family: Montserrat; src: url(Montserrat-VariableFont_wght.ttf); }
* { font-family: Montserrat; }  /* for the snippet to work, we need a CDN link for this TTF file */
.w400 { font-weight: 400; }
.w500 { font-weight: 500; }
.w600 { font-weight: 600; }
.w700 { font-weight: 700; }
.w800 { font-weight: 800; }

<div class=\"w400\">weight 400</div>
<div class=\"w500\">weight 500</div>
<div class=\"w600\">weight 600</div>
<div class=\"w700\">weight 700</div>
<div class=\"w800\">weight 800</div>

从字体自述文件：

Montserrat 是具有此轴的可变字体：wght

这意味着所有样式都包含在这些文件中：
蒙特塞拉特-VariableFont_wght.ttf

标签： css fonts font-face google-font-api

【解决方案1】：

使用font-variation-settings 而不是font-weight。

HTML：

<div class="w400">weight 400</div>
<div class="w500">weight 500</div>
<div class="w600">weight 600</div>
<div class="w700">weight 700</div>
<div class="w800">weight 800</div>

CSS：

@font-face {
  font-family: Montserrat;
  src: url(Montserrat-VariableFont_wght.ttf);
}

* {
  font-family: Montserrat;
}

.w400 {
  font-variation-settings: 'wght' 400;
}

.w500 {
  font-variation-settings: 'wght' 500;
}

.w600 {
  font-variation-settings: 'wght' 600;
}

.w700 {
  font-variation-settings: 'wght' 700;
}

.w800 {
  font-variation-settings: 'wght' 800;
}

【讨论】：

正确，请注意，如果您想在同一元素上使用多个设置，则需要制定特定规则，因为您不能拥有同一属性的多个实例。因此，为了将权重设置为 700 并将宽度设置为 200，您需要以下规则集：正确，请注意，如果您想在同一元素上使用多个设置，则需要制定特定规则。字体变化设置：“wght”700，“wdth”200；
这是不是正确的方法。请参阅相关的 CSS 规范，drafts.csswg.org/css-fonts/#font-variation-settings-def：“如果可能，作者通常应该使用与字体变化相关的其他属性（例如 font-optical-sizing），并且仅在特殊情况下使用此属性，因为它的使用是唯一的方法访问特定的不常用字体变体。“例如，最好使用 font-weight: 700 而不是 font-variation-settings: "wght" 700。”

【解决方案2】：

这个问题是asked two years ago，得到了相同的次优答案，需要第二个答案才能获得 W3C 推荐的解决方案。

问题不在于您需要使用 font-variation-settings，而是您的 @font-face 规则没有 font-weight 声明。

您可以使用 font-variation-settings，但请注意，这在级联方面效果不佳。（有关详细信息和解决方法，请参阅https://pixelambacht.nl/2022/boiled-down-fixing-variable-font-inheritance/。）

因此，CSS 规范建议反对在可以使用特定属性的任何情况下使用 font-variation-settings。

如果可能，作者通常应该使用与字体变体相关的其他属性（例如 font-optical-sizing），并且仅在特殊情况下使用此属性，因为它的使用是访问特定不常用字体变体的唯一方法。

例如，最好使用 font-weight: 700 而不是 font-variation-settings: "wght" 700。

https://www.w3.org/TR/css-fonts-4/#font-variation-settings-def

更好的解决方案是在@font-face 规则中添加字体粗细声明。使用可变字体，您可以指定两个值来声明一个权重范围。

HTML
<div class="w400">weight 400</div>
<div class="w500">weight 500</div>
<div class="w600">weight 600</div>
<div class="w700">weight 700</div>
<div class="w800">weight 800</div>
CSS
@font-face {
  font-family: Montserrat;
  /* declare weights giving two values to specify a range */
  font-weight: 400 800
  src: url(Montserrat-VariableFont_wght.ttf);
}

* {
  font-family: Montserrat;
}

.w400 {
  font-weight: 400;
}

.w500 {
  font-weight: 500;
}

.w600 {
  font-weight: 600;
}

.w700 {
  font-weight: 700;
}

.w800 {
  font-weight: 800;
}
附录：事实证明，关于需要使用 font-variation-settings 来访问可变字体中的不同权重的误解很普遍。 Web Almanac 网站刚刚发布了它的biennial analysis of font usage on the Web，事实证明，87% 的 font-variation-settings 使用是针对“wght”轴的。他们观察到，

这让我们有些吃惊，因为不需要使用低级的 font-variation-settings 属性来设置自定义的权重轴值。您可以简单地将 font-weight 属性与自定义值一起使用，例如 font-weight: 550 用于 500 到 600 之间的权重...

... 对于光学尺寸、宽度、斜体和倾斜轴，可以看到类似的结果，可以使用高级字体光学尺寸、字体拉伸和字体样式属性进行设置。使用更高级别的属性将使您的 CSS 更具可读性，并避免意外禁用轴——这是低级属性的常见错误来源。

【讨论】：