使用粗体或斜体设置自定义字体的正确方法是什么

Question

假设我需要在我的网站上放置自定义字体。

我有这种字体，假设它叫“Aphias”。我使用这个问题：https://stackoverflow.com/a/43366402/3536236并拥有CSS：

@font-face {
    font-family: 'Aphias';
    src: url('/assets/fonts/Aphias.woff') format('woff'), 
         url('/assets/fonts/Aphias.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

好的，但是我的字体有很多用于不同迭代的单独文件，例如粗体文件和斜体文件。

我的字体目录包含：

蚜虫.ttf
蚜虫.woff
Aphias-Bold.ttf
Aphias-Bold.woff
Aphias-斜体.ttf
Aphias-斜体.woff

将这些迭代添加到 CSS 的正确方法是什么 - 例如；字体的

<strong></strong>

版本在正确的时间加载，或者当文本标记为

font-weight: bold;

时显示粗体迭代：

例如

    @font-face {
        font-family: 'Aphias';
        src: url('/assets/fonts/Aphias.woff') format('woff'), 
             url('/assets/fonts/Aphias.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    
    
    p {
        font-family: 'Aphias', Arial, sans-serif;
        font-size: 1rem;
    }

    p > span {
        font-weight: bold;
    }
    
    
    

<p>
This is some text with the custom font on display. Loaded from the font file. 

<span>This is the same text but should be bold / heavy font.</span></p>

我认为我能做到的唯一方法是使用多个

@font-face

，但它们似乎不起作用。

例如

@font-face {
    font-family: 'Aphias';
    src: url('/assets/fonts/Aphias.woff') format('woff'), 
         url('/assets/fonts/Aphias.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Aphias Italic';
    src: url('/assets/fonts/Aphias-Italic.woff') format('woff'), 
         url('/assets/fonts/Aphias-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Aphias Bold';
    src: url('/assets/fonts/Aphias-Bold.woff') format('woff'), 
         url('/assets/fonts/Aphias-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

我找不到有关此特定问题的任何文档。我该如何让它发挥作用？这里有类似的问题：定义 CSS @Font-Face 粗体斜体答案实际上并没有回答所提出的问题。

Answer 1

在不同变体中使用相同字体的方法是为每种类型定义自己的 -

@font-face

，并在

font-family

中将它们命名为相同的名称。 然后在使用字体时 - 例如，如果您在 CSS 中定义：

font-style: italic;

那么浏览器就会知道要使用斜体类型的字体， 根据你的例子，它看起来像这样：

@font-face {
font-family: 'Aphias';
src: url('/assets/fonts/Aphias.woff') format('woff'),
url('/assets/fonts/Aphias.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Aphias';
src: url('/assets/fonts/Aphias-Italic.woff') format('woff'),
 url('/assets/fonts/Aphias-Italic.ttf') format('truetype');
 font-weight: normal;
 font-style: italic;
}

@font-face {
 font-family: 'Aphias';
 src: url('/assets/fonts/Aphias-Bold.woff') format('woff'),
 url('/assets/fonts/Aphias-Bold.ttf') format('truetype');
 font-weight: bold;
 font-style: normal;
}

当您想以特定方式使用字体时，例如使用

bold

，您可以这样做：

<p>
This is some text with the custom font on display. Loaded from the font file.

<span>This is the same text but should be bold / heavy font.</span></p>

p {
 font-weight: bold; 
}

这将加载“Aphias”的粗体版本。