时间戳

首页 > 解决方案 > Amstelvar 的 @font-face 声明（斜体可变字体）

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

问题描述

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

这是现场示例。斜体字必须在“带有斜体和粗体的测试页”标题中斜体，但不幸的是，它没有任何效果。

标签： htmlcssfontsfont-facewebfonts

解决方案

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

发现了一些东西：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;
}

推荐阅读