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

Question

为 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');
  }

添加这个是class我申请的斜体文字：

.italic {
  font-style: italic,

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

这里是live example。 italic这个词不得不在"Test Page with italics and bold"header中变成斜体，可惜没有任何效果。

Answer 1

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

发现了一些事情：Amstelvar 的子集丢失了它们的变异轴，因此表现不正常。另外：它有一个斜体轴而不是倾斜的，并且由于 roman/italic 是单独的文件，您可以只使用家庭分组和字体样式：斜体看看：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;
}

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

@font-face declaration for Amstelvar (italic variable font)

html

css

fonts

webfonts

font-face