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 回答