我有两个字体文件，例如：FONT-light 和 FONT-bold。两者都来自@font-face 套件，因此每个版本都包含大约 5 个字体文件（OGV、TTF、WOFF、EOT）。
要从浅色版本变为粗体版本，我必须使用font-family: FONT-light;，然后使用font-family: FONT-bold;。我想改用font-weight: light; 和font-weight: bold;，因为我需要它来进行CSS3 过渡。我如何做到这一点？
【问题讨论】：
@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;
}
【讨论】：
在嵌入字体 (@font-face) 上使用 font-weight 和 font-style 属性并不是那么简单。您需要注意一些事项。
@font-face 语法：语法对于在所有浏览器中使用字体非常重要。 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');
}
此版本（http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/，查找 'The Fontspring @font-face syntax'）是最新版本，适用于 IE6、iOS、Android。请务必查看链接以了解为什么应该以这种方式编写。
font-weight 和 font-style
如果您愿意，可以在@font-face 声明上应用font-weight 和font-style 以使用相同字体的变体，但您需要具体和精确地了解这些特征。有一些方法可以做到。
使用'Bulletproof Syntax'，假设您要加载'Normal'、'Bold'和'斜体的变体，我们有：
@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;
}
因此，要使用您想要的变体，您必须调用与其对应的font-family，并在规则上声明font-weight: normal 和font-style: normal。如果您不这样做，浏览器可能会默认将 'faux bold/italic' 应用于具有此规则的元素。 'faux' 样式可以强制元素与它一起显示，即使已经使用斜体或粗体字体。问题在于字体总是看起来很丑，因为它不是原来的样子。
当您定义 'Normal' 字体时也会发生同样的情况，例如，在 <p> 元素上，并在其中放置 <strong> 或 <em>。 <strong> 和 <em> 将在字体上强制使用粗体/斜体过程。为避免这种情况，您需要将正确的font-family（指定为粗体/斜体）应用于<strong> 和<em> 的规则，并将它们各自的属性（font-weight 和font-style）设置为@ 987654353@:
strong {
font-family: 'FONT-NAME-bold';
font-weight: normal;
font-style: normal;
}
em {
font-family: 'FONT-NAME-italic';
font-weight: normal;
font-style: normal;
}
但它有一个问题。如果您的字体未加载，则选择的后备将失去其权重/样式。这将我们引向下一条路。
如果您的字体没有加载，这种方式更容易通过多种权重和样式以及后备正确处理。使用相同的示例：
@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;
}
在此方法中，@font-face 声明中的权重和样式充当“标记”。当浏览器在 CSS 的其他地方遇到这些粗细和样式时，它知道要访问哪个 @font-face 声明以及要使用哪种字体变体。
确保您的权重和样式是否匹配。如果是这样，当您在使用您创建的@font-face 的父级中使用<strong> 或<em> 时，它将加载正确的声明。
在这些嵌入风格化方法的源代码 (http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/) 中，有另一种方法结合了我提到的两种方法（2.1 和 2.2） .但它带来了很多问题，包括'faux bold/italic'，迫使你向<strong>声明正确的font-family，对于<em>，classes在weight 中不同的font 变体的样式。我想我选择的这两个足以胜任这项工作。
来源： 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/
无需使用大量字体扩展。 .woff 类型几乎适用于所有浏览器，除了 IE，如果你需要支持 IE8（它只接受 .eot 格式）。 (http://caniuse.com/#feat=fontface)
其他可能有用的提示是使用base64 编码将字体嵌入CSS。这将有助于避免大量请求，但您需要记住它会覆盖 CSS 文件。这可以通过组织 CSS 内容和字体来处理，以便在一个小文件中快速提供第一个 CSS 规则，然后在另一个 CSS 文件中传递其他规则，在 <body> 标记的结尾处。
【讨论】：
您可以将数字添加到 font-weight 属性，例如添加到 light 版本。
font-weight: normal; // light version as it is.
font-weight: 700; // makes light version bolder.
【讨论】：