字体提供时如何显示不同的斜体和斜体样式？

Question

例如，Victor Mono 字体有很大不同（即设计合理）斜体和斜体样式，我将它用作我首选的编程字体，但我似乎无法让它正确显示两种样式同时在代码编辑器/文本处理器或网页上。

当我在本地系统上安装字体时，斜体和斜体都显示斜体变体，我认为这可能是操作系统字体系统的问题，所以我尝试像这样使用 CSS 嵌入字体

@font-face {
    font-family: 'Victor Mono';
    src: url('VictorMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Victor Mono';
    src: url('VictorMono-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Victor Mono';
    src: url('VictorMono-Oblique.ttf') format('truetype');
    font-weight: normal;
    font-style: oblique;
}

但现在两者都

html {font-family:Victor Mono; font-weight:normal; font-style: italic;}

和

html {font-family:Victor Mono; font-weight:normal; font-style: oblique;}

显示倾斜样式。如果我重新排序@font-face 规则，将斜体放在斜体下面，就像这样

@font-face {
    font-family: 'Victor Mono';
    src: url('VictorMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Victor Mono';
    src: url('VictorMono-Oblique.ttf') format('truetype');
    font-weight: normal;
    font-style: oblique;
}

@font-face {
    font-family: 'Victor Mono';
    src: url('VictorMono-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

斜体和斜体样式都将显示斜体变体。所以看起来 font-style: italic 和 font-style: oblique 实际上被渲染引擎解释为相同的规则，而后面出现的规则会覆盖前一个？

那么我应该如何显示不同的斜体和斜体字体样式？例如，我希望 VSCode 以斜体样式显示 cmets，而以斜体样式显示保留关键字。目前它一直为 cmets 和保留关键字显示斜体，当我查看代码时会伤害我的眼睛。

Answer 1

我认为它是因为相同的字体系列名称，试试这个：

@font-face {
font-family: 'Victor Mono Normal';
src: url('VictorMono-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;}
@font-face {
font-family: 'Victor Mono Oblique';
src: url('VictorMono-Oblique.ttf') format('truetype');
font-weight: normal;
font-style: oblique;}
@font-face {
font-family: 'Victor Mono Italic';
src: url('VictorMono-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;}

Answer 2

The dist css in the Github repo only links the italic version - 当oblique 以这种方式被引用时，我已经看到了问题，所以这可能会导致问题。 The demo site's css 像 Fahim Khan 的回答提到的那样分别声明它们，所以如果你想单独引用它们，这可能是你必须做的。

我不确定设计师是否打算让您能够像这样一起使用这三种样式，或者如何做到这一点 - 示例代码仅将普通和斜体一起使用。 IIRC，大多数编辑器都有单独的粗体字体设置，您可以将其设置为不同的字体 - 这可能是他们在编辑器中组合它们的方式，将其设置为斜体版本。