Amstelvar 的 @font-face 声明（斜体可变字体）答案

【问题标题】：@font-face declaration for Amstelvar (italic variable font)Amstelvar 的 @font-face 声明（斜体可变字体）
【发布时间】：2020-08-10 07:10:50
【问题描述】：

为Amstelvar 斜体（可变）字体定义@font-face 声明的正确方法是什么？

这是我使用的字体声明：

@font-face {
    font-family: 'Amstelvar';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    src: url('amstelvar-roman.woff2') format('woff2-variations'),
      url('amstelvar-roman.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Amstelvar';
    font-weight: 100 900;
    font-display: swap;
    font-style: oblique 0deg 10deg;
    src: url('amstelvar-italic.woff2') format('woff2-variations'),
      url('amstelvar-italic.woff2') format('woff2');
  }

添加这是我应用于斜体文本的类：

.italic {
  font-style: italic,

  @supports (font-variation-settings: normal): {
    font-variation-settings: 'slnt' -10,
    font-style: oblique 10deg,
  }
}

这里是live example。 italic 一词必须在“带有斜体和粗体的测试页”标题中斜体，但不幸的是，它没有任何效果。

【问题讨论】：

标签： html css fonts font-face webfonts

【解决方案1】：

在推特上发布了这个，但我想我也会在这里添加它：

发现了一些问题：Amstelvar 的子集丢失了它们的变化轴，因此行为不正常。另外：它有一个斜体轴且不倾斜，并且由于罗马/斜体是单独的文件，您可以只使用家庭分组和字体样式：斜体看看：https://codepen.io/jpamental/pen/wvKdmPp

@font-face {
  font-family: 'Amstelvar';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Amstelvar-Roman.woff2),
  url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Amstelvar-Roman.woff2) format('woff2');
}

@font-face {
  font-family: 'Amstelvar';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Amstelvar-Italic.woff2),
  url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Amstelvar-Italic.woff2) format('woff2');
}
em {
  font-style: italic;
}

【讨论】：