使用粗体或斜体（等）迭代设置自定义字体的正确方法是什么？

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

我有这个字体，假设它的名字是“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;
}

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

我的字体目录包含：

Aphias.ttf
Aphias.woff
Aphias-Bold.ttf
Aphias-Bold.woff
Aphias-Italic.ttf
Aphias-Italic.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-faces，但它们似乎不起作用。

例如

@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 粗体斜体答案实际上并没有回答所提出的问题。