使用CSS3字体的正确方法是什么? [英] What's the correct way of using CSS3 font-face?

问题描述

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

Could someone please help me understand what's the correct way of using CSS3 font-face. Below are some font-face declarations, which one is correct and why?

/* 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 */

这些代码示例中的区别在于，声明和使用粗体"字体的方式.请告知，其中哪个是正确的，为什么?

The difference in these code samples, is the way "Bold" font is being declared and used. Please advise, which one is correct from these and why?

PS:对于这么长的问题/样本，我感到抱歉.我只是想提供尽可能多的信息，以免造成混乱.

PS: I am sorry for such a long question/sample. I just wanted to provide as much information as I could to avoid confusion.

尽管正如@Jukka在下面的答案之一中提到的，逻辑方法是使用代码#1"，但我只是检查了Safari，与之相比，粗体字体使Safari上的粗体太多了到其他浏览器，但是如果我使用代码#2"，则所有浏览器都会渲染相同的图像，因此当使用不同的字体声明时，似乎确实发生了一些事情.因此，目前看来，代码#2"是必经之路，怎么说呢！

Edit 1: Even though as mentioned by @Jukka in one of the answers below, the logical approach is to use "Code #1", but I just checked Safari and the bold font renders way too much bolder on Safari as compared to other browsers, but if I use "Code #2" all browsers render the same, so it does appear that there is something going on behind the scenes when using different font-face declarations. So at this moment I seem "Code #2" is the way to go, what say!

推荐答案

由于CSS语法不允许在关键字bold和normal周围加上引号，因此没有一种代码是正确的.否则，代码1是基于逻辑原理的，因为它指定了两个字体(正常字体和粗体字体)，因为它们显然具有相同的字体家族.其他代码将每个字体声明为字体家族.谨慎使用时，此方法也适用.

None of the codes is correct, since quotation marks are not allowed around the keywords bold and normal according to CSS syntax. Otherwise, code 1 is based on logical principles, since it specifies two typefaces, normal and bold, as being of the same font family, as they apparently are. The other codes declare each typeface as if it were a font family. Used with due caution, this approach works, too.

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

The main practical difference is that using the logical approach (code 1), you could simply declare font-family: WebFont, Foobar, even for all elements if you like, and the bold typeface would automatically be used for those elements that have font-weight: bold set on them (by browser defaults, like for h1, or by explicit setting). This also means that if the WebFont font family is not used for some reason (like browser setting that rejects downloadable fonts), the appropriate typeface (normal or bold) of the Foobar font would be used.

这篇关于使用CSS3字体的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！