没有字体样式集的可变字体斜体/斜体在 Safari 中不起作用

Question

我正在使用最近更新为可变字体的 Google 字体“Vollkorn”。我只使用这种字体的斜体变体。

在 Chrome 上，这可以正常工作并显示为斜体。但在 Safari 上，它需要将 font-style: italic 样式应用于使用它的任何地方。

我正在使用一个非常大且锁定的 CMS，因此将此选项添加到使用它的任何地方都是一项艰巨的任务。

有没有办法在 Safari 中强制斜体而不需要 font-style: italic。可能是导入 URL 上的设置或边界。我已经彻底查看了 Google API CSS2 可变字体文档，但找不到这样的选项：https://developers.google.com/fonts/docs/css2

字体：https://fonts.google.com/specimen/Vollkorn

@import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital@1&display=swap');

body {
  font-family: 'Vollkorn', sans-serif;
  font-size: 50px;
  //font-style: italic;
}

Codepen：https://codepen.io/jakehills/pen/RwrxERp

Answer 1

似乎它可能是一个 Safari 错误：

如果您复制导入的网址https://fonts.googleapis.com/css2?family=Vollkorn:ital@1&display=swap，然后在另一个浏览器窗口中转到该网址，您可以看到 Google 字体提供的 CSS：

/* cyrillic-ext */
@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/vollkorn/v12/0ybuGDoxxrvAnPhYGxksckM2WMCpRjDj-DJGWlmTObTa3w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/vollkorn/v12/0ybuGDoxxrvAnPhYGxksckM2WMCpRjDj-DJGWlmaObTa3w.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/vollkorn/v12/0ybuGDoxxrvAnPhYGxksckM2WMCpRjDj-DJGWlmdObTa3w.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/vollkorn/v12/0ybuGDoxxrvAnPhYGxksckM2WMCpRjDj-DJGWlmRObTa3w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/vollkorn/v12/0ybuGDoxxrvAnPhYGxksckM2WMCpRjDj-DJGWlmQObTa3w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/vollkorn/v12/0ybuGDoxxrvAnPhYGxksckM2WMCpRjDj-DJGWlmeObQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

每个@font-face 规则都包含font-style: italic;。 @font-face 规则描述了可以使用的可用 字体。 （由于unicode-range 描述符，这些规则被视为描述一个 可用字体的组合。）用户代理将应用字体匹配算法，将内容的样式与可用的字体进行比较。

在您的内容和 CSS 中，您希望指定 font-family: Vollkorn; 而不明确指定 font-style: italic;。如果您没有明确指定font-style，则假定初始值font-style: normal;。因此，浏览器会将样式为 font-family: 'Vollkorn'; font-style: normal; 的内容与包含 font-family: 'Vollkorn'; font-style: italic; 的可用面孔进行比较。

现在，根据 CSS Fonts Module Level 4 中的5.2 Matching font styles，匹配算法的早期步骤将比较font-family：

1. 对于其他姓氏，用户代理会尝试在通过@font-face 规则定义的字体中查找姓氏...

这应该与 Google 字体的 @font-face 规则中定义的 Vollkorn 组合相匹配。

稍后在算法中，font-stretch 值将被比较，但不应阻止前面的 font-family 匹配。

如果font-style的值正常，

1. 大于或等于 0 的倾斜值按升序检查。
2. 如果未找到匹配项，则按升序检查大于或等于 0 的斜体值。

数字斜体值是指具有斜体轴的可变字体可能具有从 0 到 1 的连续范围内的实例。Google 字体提供的字体实际上是 静态实例他们从变量字体派生的字体。因此，描述符 font-style: italic 被隐式处理为 1。

1. ...如果字体没有任何斜体强度变化的概念...它的样式根据 font-style 属性定义中的描述进行映射。

和

对于使用变体的 TrueType / OpenType 字体...值为 1 的斜体变体用于实现斜体值。

我没有日复一日地使用 CSS 字体规范，但我认为我的阅读是正确的。在我看来，Chrome 是正确的，但您为 Safari 描述的行为是一个错误。 （这让我很惊讶，因为 CSS 字体模块编辑器来自 Safari 团队。）

我建议您向 Google Fonts 人员报告：这可能会影响他们的一些字体，他们的工程师通过 CSS 工作组与 Chrome、Safari 和其他浏览器工程师进行交互。向 GF 团队发送反馈的一种方法是在他们的GitHub project 中打开一个问题。