css - 使用 CSS3 font-face 的正确方法是什么？

Question

谁能帮我理解什么是使用 CSS3 字体的正确方法。下面是一些字体声明，哪一个是正确的，为什么？

/* START OF SAMPLE CODE # 1 */
@font-face {
    font-family: 'WebFont';
    src: url('webfont.eot');
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.woff') format('woff'),
         url('webfont.ttf') format('truetype'),
         url('webfont.svg#WebFont') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'WebFont';
    src: url('webfont-bold.eot');
    src: url('webfont-bold.eot?#iefix') format('embedded-opentype'),
         url('webfont-bold.woff') format('woff'),
         url('webfont-bold.ttf') format('truetype'),
         url('webfont-bold.svg#WebFont-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}
h1 {
    font-family: 'WebFont', blah, blah, blah;
    font-weight: bold;
}
h2 {
    font-family: 'WebFont', blah, blah, blah;
    font-weight: normal;
}
/* END OF SAMPLE CODE # 1 */

=========

/* START OF SAMPLE CODE # 2 */
@font-face {
    font-family: 'WebFont';
    src: url('webfont.eot');
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.woff') format('woff'),
         url('webfont.ttf') format('truetype'),
         url('webfont.svg#WebFont') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'WebFontBold';
    src: url('webfont-bold.eot');
    src: url('webfont-bold.eot?#iefix') format('embedded-opentype'),
         url('webfont-bold.woff') format('woff'),
         url('webfont-bold.ttf') format('truetype'),
         url('webfont-bold.svg#WebFont-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
h1 {
    font-family: 'WebFontBold', blah, blah, blah;
    font-weight: normal;
}
h2 {
    font-family: 'WebFont', blah, blah, blah;
    font-weight: normal;
}
/* END OF SAMPLE CODE # 2 */

=========

/* START OF SAMPLE CODE # 3 */
@font-face {
    font-family: 'WebFont';
    src: url('webfont.eot');
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.woff') format('woff'),
         url('webfont.ttf') format('truetype'),
         url('webfont.svg#WebFont') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'WebFontBold';
    src: url('webfont-bold.eot');
    src: url('webfont-bold.eot?#iefix') format('embedded-opentype'),
         url('webfont-bold.woff') format('woff'),
         url('webfont-bold.ttf') format('truetype'),
         url('webfont-bold.svg#WebFont-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}
h1 {
    font-family: 'WebFontBold', blah, blah, blah;
    font-weight: bold;
}
h2 {
    font-family: 'WebFont', blah, blah, blah;
    font-weight: normal;
}
/* END OF SAMPLE CODE # 3 */

这些代码示例的不同之处在于声明和使用“粗体”字体的方式。请指教，其中哪一个是正确的，为什么？

PS:很抱歉提出这么长的问题/示例。我只是想提供尽可能多的信息以避免混淆。

Edit 1: Even though as mentioned by @Jukka in one of the answers below, the logical approach is to use "Code #1", but I just checked Safari and the bold font renders way too much bolder on Safari as compared to other browsers, but if I use "Code #2" all browsers render the same, so it does appear that there is something going on behind the scenes when using different font-face declarations. So at this moment I seem "Code #2" is the way to go, what say!

Answer 1

没有一个代码是正确的，因为根据 CSS 语法，关键字 bold 和 normal 不允许使用引号。否则，代码 1 是基于逻辑原则的，因为它指定了两种字体，普通字体和粗体，它们属于同一字体系列，正如它们表面上的那样。其他代码将每种字体声明为一个字体系列。如果谨慎使用，这种方法也很有效。

主要的实际区别在于，使用逻辑方法(代码 1)，您可以简单地声明 font-family: WebFont, Foobar，如果您愿意，甚至可以为所有元素声明，粗体字会自动用于那些设置了 font-weight: bold 的元素(通过浏览器默认设置，例如 h1，或通过显式设置)。这也意味着，如果出于某种原因(例如拒绝可下载字体的浏览器设置)未使用 WebFont 字体系列，则将使用 Foobar 字体的适当字体(普通或粗体)。