css - 正确使用 CSS @font-face

Question

您好，我有一个关于使用 CSS @font-face 创建字体系列的快速问题。

传统上，我曾经像这样设置我的 CSS 字体:

@font-face {
    font-family: 'My Font Regular';
    src: url('fonts/myfont.ttf');
}
@font-face {
    font-family: 'My Font Bold';
    src: url('fonts/myfont-bold.ttf');
}
p { font-family: "My Font Regular";}
strong {font-family: "My Font Bold";}

不过我最近发现你可以这样做:

@font-face {
    font-family: 'My Font';
    src: url('fonts/myfont.ttf');
    font-style:normal;
    font-weight:normal;
}
@font-face {
    font-family: 'My Font';
    src: url('fonts/myfont-bold.ttf');
    font-style:normal;
    font-weight:bold;
}
p { 
font-family: "My Font" ; 
font-style:normal;
font-weight:normal;
}
strong { 
font-family: "My Font" ;
font-style:normal;
font-weight:bold; 
}

我的问题是，例如，如果我使用第二种粗体技术，文本是否仍会使用自定义 .eot 呈现，或者浏览器是否会尝试在不使用实际粗体字体文件的情况下模拟它？

谢谢

Answer 1

如果您的字体文件是粗体字体，那么设置 font-weight: bold 是多余的，并且没有必要声明 font-weight: normal 因为那是默认值。您还应该使用更多的 .eot 文件，这样您就可以像其他建议的那样回退到其他浏览器。