有人可以帮我理解使用 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”是要走的路,说什么!