2

有人可以帮我理解使用 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上显得过于粗体，但如果我使用“代码 #2”，所有浏览器都呈现相同的内容，所以当使用不同的字体声明时，看起来确实在幕后发生了一些事情。所以此刻我似乎“代码#2”是要走的路，说什么！

4

1 回答 1

1

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

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

于 2013-09-25T07:32:45.110 回答