如何在font-face字体中使用font-weight？

时间：2012-04-06 15:50:25

标签： css css3 fonts font-face

我有两个字体文件，如：FONT-light和FONT-bold。两者都来自@ font-face kit，因此每个版本都包含5个字体文件（OGV，TTF，WOFF，EOT）。

要从简易版本转换为粗体版本，我必须使用font-family: FONT-light;然后使用font-family: FONT-bold;。我想使用font-weight: light;和font-weight: bold;，因为我需要CSS3过渡。我如何实现这一目标？

3 个答案:

答案 0 :(得分：38)

@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;
}

从教程：http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

答案 1 :(得分：9)

在嵌入字体（font-weight）上使用font-style和@font-face属性并非如此简单。您需要关注一些项目。

1 - @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/，寻找'Fontspring @ font-face syntax'）是最新的版本，可以在IE6 iOS上使用}，Android。重要的是要查看链接以了解为什么应该以这种方式编写它。

2 - 字体属性，如font-weight和font-style

如果需要，可以在font-weight声明中应用font-style和@font-face来使用相同字体的变体，但您需要具体且准确地了解这些特征。有一些方法可以做到。

2.1 - 对每个变体使用一个字体系列

使用'防弹语法'，假设您要加载'正常'，'粗体'和'斜体“变体，我们有：

@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'应用于默认情况下具有此规则的元素。即使已经使用斜体或粗体字体，'仿'样式也会强制元素与其一起显示。问题是字体看起来总是很难看，因为它不是看起来的方式。

例如，在<p>元素上定义'普通'字体时会出现同样的情况，并且在其中放置<strong>或{{ 1}}。 <em>和<strong>会强制对字体进行粗体/斜体处理。为避免这种情况，您需要将正确的<em>指定为粗体/斜体，并应用font-family和<strong>的规则及其各自的属性（<em>并且font-weight）设置为font-style：

normal

但它存在问题。如果你的字体没有加载后备选择将失去他们的权重/样式。这引导我们进入下一个方向。

2.2 - 使用相同的字体系列名称，但不同的权重和样式

如果你的字体没有加载，这种方式更容易处理几个权重和样式和正确的后备。使用相同的例子：

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; } 声明中的权重和样式充当“标记”。当浏览器遇到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 ）。但是它带来了很多问题，包括'虚假粗体/斜体'，迫使你向@font-face右边<strong>声明，{{1} {，font-family，对<em>中classes不同的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/

编辑1：

无需使用大量字体扩展名。如果您需要支持IE8（仅接受weight格式），.woff类型几乎会出现除IE之外的所有浏览器。 （http://caniuse.com/#feat=fontface）

可能有用的其他提示是使用.eot编码将字体嵌入到CSS中。这将有助于避免大量请求，但您需要记住它将覆盖CSS文件。这可以通过组织CSS内容和字体来处理，以便在一个小文件中快速提供第一个CSS规则，在base64标记结束时将其他CSS规则传递到另一个CSS文件。

答案 2 :(得分：2)

您可以为font-weight属性添加数字，例如添加到light版本。

font-weight: normal; //  light version as it is.
font-weight: 700; // makes light version bolder.
相关问题
最新问题