可变字体 ital/italic 在没有设置字体样式的情况下无法在 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;
}

代码笔：https://codepen.io/jakehills/pen/RwrxERp

Answer 1

似乎是 Safari 的一个错误：

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

/* 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 规则描述了可以使用的 available 字体。（由于 unicode-range 描述符，这些规则被视为描述 one 可用字体的组合。）用户代理将应用字体匹配算法来比较内容的样式针对可用面孔。

在您的内容和 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 字体模块级别 4 中的 5.2 Matching font styles，匹配算法的早期步骤将比较 font-family:

For other family names, the user agent attempts to find the family name among fonts defined via @font-face rules...

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

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

If the value of font-style is normal,

Oblique values greater than or equal to 0 are checked in ascending order.

If no match is found, italic values greater than or equal to 0 are checked in ascending order.

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

... If a font does not have any concept of varying strengths of italics ... its style is mapped according to the description in the font-style property definition.

和

For TrueType / OpenType fonts that use variations... the ital variation with a value of 1 is used to implement the italic values.

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

我建议你向 Google 字体专家报告：这可能会影响他们的许多字体，他们的工程师通过 Chrome、Safari 和其他浏览器工程师进行交互62=] 工作组。向 GF 团队发送反馈的一种方法是在他们的 GitHub project.

中打开一个问题

可变字体 ital/italic 在没有设置字体样式的情况下无法在 Safari 中工作

Variable font ital/italic not working in Safari without font-style set

css

fonts

google-font-api