可变字体支持中的斜体答案

【问题标题】：Italics in variable font support可变字体支持中的斜体
【发布时间】：2021-04-17 02:36:51
【问题描述】：

我在从普通字体样式切换到带有网络字体的斜体时遇到问题。

当我使用字体变化设置时，我只能得到正常的样式：

font-variation-settings: 'wght' 400, 'ital' 1;

我正在使用一种名为Petrona 和@font-ace 的Google 字体。

这是我如何在 CSS 中调用字体：

@font-face {
    font-family: 'Petrona';
    src: url('fonts/petrona/Petrona-VariableFont_wght.ttf') format('woff2 supports variations'),
       url('fonts/petrona/Petrona-VariableFont_wght.ttf') format('woff2-variations');
    font-weight: 1 900;
    font-style: normal;
}

@font-face {
    font-family: 'Petrona';
    src: url('fonts/petrona/Petrona-Italic-VariableFont_wght.ttf') format('woff2 supports variations'),
       url('fonts/petrona/Petrona-Italic-VariableFont_wght.ttf') format('woff2-variations');
    font-weight: 1 900;
    font-style: italic;
}

body {
    font-family: Petrona;
    font-variation-settings: 'wght' 400, 'ital' 1;
}

如果我删除第一个 @font-face 声明，我会得到斜体字...但是如果我尝试：

font-variation-settings: 'wght' 400, 'ital' 0;

我仍然得到斜体...

我已阅读this article，但我似乎看不出哪里出错了。

【问题讨论】：

标签： css fonts variable-fonts

【解决方案1】：

斜体没有在这个系列中作为变体实现。斜体和罗马是两种不同的可变字体。对于字体系列，“ital”与 design 轴相关，但与 variation 轴无关。为 'ital' 设置 font-variation-setting 不会有任何效果，因为字体没有 'ital' 变体。

【讨论】：