@字体- Amstelvar的字体声明(斜体变量字体)

Question

为@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,
  }
}

这是实例化。斜体这个词必须在“带有斜体和粗体的测试页面”标题中斜体化，但不幸的是，它没有任何效果。

Answer 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;
}