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

Question

有人可以帮助我了解使用 CSS3 字体的正确方法是什么。下面是一些 font-face 声明，哪一个是正确的，为什么？

/* 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：对于这么长的问题/示例，我深表歉意。我只是想提供尽可能多的信息以避免混淆。

编辑 1：即使@Jukka 在下面的答案之一中提到，逻辑方法是使用“代码 #1”，但我刚刚检查了 Safari，与 Safari 相比，粗体字体在 Safari 上显得过于粗体到其他浏览器，但是如果我使用“代码 #2”，所有浏览器都呈现相同的内容，所以当使用不同的字体声明时，看起来确实在幕后发生了一些事情。所以此刻我似乎“代码#2”是要走的路，怎么说呢！

Answer 1

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

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