Как показать разные стили курсива и косой, когда их предоставляет шрифт?

Question

Например, шрифт Victor Mono имеет совершенно разные (то есть правильно спроектированные) стили курсива и косой, и я использую его как свой предпочтительный программный шрифт, однако я не могу его сделатьправильно отображать оба стиля одновременно в редакторах кода / текстовых редакторах или на веб-странице.

Когда я установил шрифт в своей локальной системе, курсив и Oblique показывают вариант курсива, я подумал, что это может быть проблемой с системой шрифтов ОС, поэтому я попытался встроить шрифты с помощью 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 показывал комментарии в курсивном стиле, а зарезервированные ключевые слова - в стиле наклонной.В настоящее время он показывает курсив все время как для комментариев, так и для зарезервированных ключевых слов, что причиняет мне боль, когда я просматриваю код.

Answer 1

dist css в репозитории Github связывает только курсивную версию - я видел проблемы, когда на ссылку 1003 * ссылаются таким образом, что может вызывать проблемы. css демонстрационного сайта объявляет их отдельно, как упоминает ответ Фахима Кхана, так что это может быть то, что вам нужно сделать, если вы хотите сослаться на них отдельно.

Я не уверен, что разработчик намеревалсядля того, чтобы вы могли использовать три стиля вместе, как это, или как это было бы сделано - пример кода использует только обычный и курсив вместе.IIRC, большинство редакторов имеют отдельную настройку полужирного шрифта, которую вы можете установить для другого шрифта - это может быть то, как они комбинируют их в своем редакторе, устанавливая его курсивной версией.

Answer 2

Я думаю, что это из-за того же имени семейства шрифтов, попробуйте это:

@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;}