如何为自定义字体正确设置粗体、斜体等变体？

你之前的配置问题出在给粗体、斜体变体设置了单独的font-family名称（比如Aphias Italic、Aphias Bold），浏览器没办法把这些变体和主字体关联起来，导致设置font-weight:bold或用<strong>标签时，只会用常规字体模拟加粗，不会加载你准备的粗体文件。

正确的做法是所有字体变体使用同一个font-family名称，通过font-weight和font-style来区分不同的字体文件，这样浏览器就能自动匹配对应变体：

@font-face {
    font-family: 'Aphias';
    src: url('/assets/fonts/Aphias.woff') format('woff'), 
         url('/assets/fonts/Aphias.ttf') format('truetype');
    font-weight: 400; /* normal对应的标准数值是400，也可以写normal */
    font-style: normal;
}

@font-face {
    font-family: 'Aphias'; /* 和主字体保持完全一致的family名 */
    src: url('/assets/fonts/Aphias-Italic.woff') format('woff'), 
         url('/assets/fonts/Aphias-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Aphias'; /* 同样使用主字体family名 */
    src: url('/assets/fonts/Aphias-Bold.woff') format('woff'), 
         url('/assets/fonts/Aphias-Bold.ttf') format('truetype');
    font-weight: 700; /* bold对应的标准数值是700，也可以写bold */
    font-style: normal;
}

配置完成后，只需要在全局或目标元素上设置主字体即可：

body {
    font-family: 'Aphias', sans-serif; /* 加上sans-serif作为回退字体，提升兼容性 */
}

这样：

• 使用<strong>标签或设置font-weight: bold/font-weight:700的文本，会自动加载Aphias-Bold字体文件
• 设置font-style: italic的文本，会自动加载Aphias-Italic字体文件

内容的提问来源于stack exchange，提问作者Mm-Art-In