CSS 如何将字体粗细与字体字体一起使用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10045859/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use font-weight with font-face fonts?
提问by Atadj
I've got two font files like: FONT-light and FONT-bold. Both come from @font-face kit so each version has like 5 font files included (OGV, TTF, WOFF, EOT).
我有两个字体文件，例如：FONT-light 和 FONT-bold。两者都来自@font-face 套件，因此每个版本都包含 5 个字体文件（OGV、TTF、WOFF、EOT）。
To go from light version to bold version I have to use font-family: FONT-light;and then font-family: FONT-bold;. I want to use font-weight: light;and font-weight: bold;instead because I need it to CSS3 transitions. How do I achieve that?
从光版大胆的版本，请我一定要使用font-family: FONT-light;，然后font-family: FONT-bold;。我想使用font-weight: light;andfont-weight: bold;代替，因为我需要它到 CSS3 过渡。我如何做到这一点？
回答by developdaly
@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
From the tutorial: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/
来自教程：http: //www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/
回答by Mateus Leon
To use the font-weightand the font-styleproperties on embedded fonts (@font-face) isn't so simple. There are a few items that you need to care about.
在嵌入字体 ( )上使用font-weight和font-style属性@font-face并不是那么简单。有几个项目你需要关心。
1 - @font-faceSyntax:
1 -@font-face语法：
The syntax is very important to use the font over all browsers. Paul Irish, with many resources, wrote the 'Bulletproof Syntax', as is shown above, which was improved several times:
语法对于在所有浏览器上使用字体非常重要。Paul Irish 拥有许多资源，编写了'Bulletproof Syntax'，如上所示，经过多次改进：
@font-face {
font-family: 'FONT-NAME';
src: url('FONT-NAME.eot?') format('eot'), url('FONT-NAME.woff') format('woff'), url('FONT-NAME.ttf') format('truetype');
}
This version (http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/, look for 'The Fontspring @font-face syntax'), is the most recent and works from IE6, on iOS, Android. It's important to take a look on the link to learn well why it should be written in that way.
此版本（http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/，查找“The Fontspring @font-face 语法”）是最新版本，适用于IE6、iOS、Android。查看链接以了解为什么它应该以这种方式编写非常重要。
2 - Font properties like font-weightand font-style
2 - 字体属性，如font-weight和font-style
If you want, is possible to apply the font-weightand font-styleon the @font-facedeclaration to use variations of the same font, but you need to be specific and precise about these characteristics. There are some ways to do it.
如果您愿意，可以在声明上应用font-weight和以使用相同字体的变体，但您需要对这些特征进行具体和精确的说明。有一些方法可以做到。font-style@font-face
2.1 - Using one font-family to each variation
2.1 - 对每个变体使用一个字体系列
Using the 'Bulletproof Syntax', supposing that you want to load the 'Normal', 'Bold'and 'Italic'variations, we have:
使用'Bulletproof Syntax'，假设您要加载'Normal'、'Bold'和'Italic'变体，我们有：
@font-face {
font-family: 'FONT-NAME-normal';
src: url('FONT-NAME-normal.eot?') format('eot'), url('FONT-NAME-normal.woff') format('woff'), url('FONT-NAME-normal.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'FONT-NAME-bold';
src: url('FONT-NAME-bold.eot?') format('eot'), url('FONT-NAME-bold.woff') format('woff'), url('FONT-NAME-bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'FONT-NAME-italic';
src: url('FONT-NAME-italic.eot?') format('eot'), url('FONT-NAME-italic.woff') format('woff'), url('FONT-NAME-italic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
So, to use the variation that you want, you have to call the font-familythat corresponds to it AND declare on the rule the font-weight: normaland font-style: normal. If you don't, the browser may apply the 'faux bold/italic'to the element that have this rules by default. The 'faux'styling works forcing the element to be shown with it, even if is already using an italic or bold font. The problem with is that the font always looks ugly because isn't the way that was made to look.
因此，要使用您想要的变体，您必须调用font-family对应于它的font-weight: normal并在规则上声明and font-style: normal。如果不这样做，浏览器可能会默认将“人造粗体/斜体”应用于具有此规则的元素。即使已经使用斜体或粗体，“人造”样式也可以强制元素与其一起显示。问题在于字体总是看起来很难看，因为它看起来不是这样。
The same occurs when you define a 'Normal'font, for example, on a <p>element and, inside of it, you place a <strong>or <em>. The <strong>and <em>will force the bold/italic process over the font. To avoid that, you need to apply the correct font-family, destinated do the be bold/italic, to a rule for <strong>and <em>, with their respective properties (font-weightand font-style) set to normal:
例如，当您在元素上定义“Normal”字体<p>并在其中放置一个<strong>或时，也会发生同样的情况<em>。在<strong>和<em>将迫使黑体/斜体过程在字体。为避免这种情况，您需要将正确的font-family、指定的加粗/斜体应用于<strong>and的规则，并将<em>它们各自的属性 ( font-weightand font-style) 设置为normal：
strong {
font-family: 'FONT-NAME-bold';
font-weight: normal;
font-style: normal;
}
em {
font-family: 'FONT-NAME-italic';
font-weight: normal;
font-style: normal;
}
But there is a problem with it. If your fonts don't load the fallbacks choosen will lost their weights/styles. This leads us to the next way.
但它有一个问题。如果您的字体未加载，则选择的回退将失去其权重/样式。这将引导我们进入下一条道路。
2.2 - Using the same font-family name, but different weights and styles
2.2 - 使用相同的字体系列名称，但不同的粗细和样式
This way is more simple to handle through several weights and styles AND fallbacks correctly if your fonts don't load. Using the same example:
如果您的字体未加载，这种方法可以更简单地处理多个权重和样式以及正确回退。使用相同的示例：
@font-face {
font-family: 'FONT-NAME';
src: url('FONT-NAME-normal.eot?') format('eot'), url('FONT-NAME-normal.woff') format('woff'), url('FONT-NAME-normal.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'FONT-NAME';
src: url('FONT-NAME-bold.eot?') format('eot'), url('FONT-NAME-bold.woff') format('woff'), url('FONT-NAME-bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'FONT-NAME';
src: url('FONT-NAME-italic.eot?') format('eot'), url('FONT-NAME-italic.woff') format('woff'), url('FONT-NAME-italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
In this method, the weights and styles in the @font-facedeclarations act as “markers”. When a browser encounters those weights and styles elsewhere in the CSS, it knows which @font-facedeclaration to access and which variation of the font to use.
在此方法中，@font-face声明中的权重和样式充当“标记”。当浏览器在 CSS 的其他地方遇到这些权重和样式时，它知道@font-face要访问哪个声明以及要使用哪种字体变体。
Make sure if your weights and styles match. If so, when you use a <strong>or <em>inside a parent which is using the @font-facethat you created, it will load the right declaration.
确定你的体重和风格是否匹配。如果是这样，当您在使用您创建的的父级中使用<strong>或时，它将加载正确的声明。<em>@font-face
In the source of these methods of stylization embedded (http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/), have another method that combines the two that I've mentioned (the 2.1and 2.2). But it brings a lot of problems, including the 'faux bold/italic', forcing you to declare to the <strong>the right font-familyand, for the <em>, classesthat styles over the variations of the fontthat differs in weight. I guess the two that I've choosed are good enough to do the job.
在这些嵌入风格化方法的源代码中（http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/），有另一种方法结合了我提到的两个（2.1和2.2）。但它带来了很多的问题，包括“仿粗体/斜体”，迫使你申报的，<strong>正确的font-family，并为<em>，classes该风格在的变化font是不同之处weight。我想我选择的两个足以胜任这项工作。
Sources: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/
来源：http: //www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-字体声明/
Edit 1:
编辑1：
There's no need to use a lot of font extensions. The .wofftype attends almost every browser, except for IE, if you need to give support for IE8 (which accepts only .eotformat). (http://caniuse.com/#feat=fontface)
没有必要使用很多字体扩展。.woff如果您需要支持 IE8（仅接受.eot格式），则该类型几乎适用于所有浏览器，IE 除外。( http://caniuse.com/#feat=fontface)
Other tip that maybe is useful is to embed the font on the CSS using base64encoding. This will help avoiding a lot of requests, but you need to remember that it'll overwight the CSS file. This can be handled organizing the CSS content and the fonts to give the first CSS rules quickly in one small file, delivering the others on another CSS file, on the close of <body>tag.
其他可能有用的技巧是使用base64编码将字体嵌入到 CSS 中。这将有助于避免大量请求，但您需要记住它会覆盖 CSS 文件。这可以通过组织 CSS 内容和字体来处理，以便在一个小文件中快速给出第一个 CSS 规则，在<body>标签结束时在另一个 CSS 文件中提供其他规则。
回答by undefined
you can add number to font-weight property, for example to the light version.
您可以将数字添加到 font-weight 属性，例如添加到轻型版本。
font-weight: normal; // light version as it is.
font-weight: 700; // makes light version bolder.
