Question

有人可以帮我理解使用CSS3 font-face的正确方法。下面是一些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在下面的一个答案中所提到的那样，逻辑方法是使用“Code＃1”，但我只是检查了Safari，并且粗体字体在Safari上渲染的方式太大了对于其他浏览器，但如果我使用“Code＃2”，所有浏览器都会呈现相同的内容，因此在使用不同的font-face声明时，看起来幕后会出现一些问题。所以在这一刻我觉得“Code＃2”是要走的路，说什么呢！

Answer 1

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

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

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

1 个答案: