31

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

要从浅色版本变为粗体版本，我必须使用font-family: FONT-light;然后font-family: FONT-bold;. 我想使用font-weight: light;and ，font-weight: bold;因为我需要它来进行 CSS3 转换。我该如何做到这一点？

4

3 回答 3

50 
@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/

于 2012-04-06T16:33:25.583 回答
18

在嵌入字体 ( ) 上使用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 语法”）是最新版本，适用于IE6、iOS、Android。查看链接以了解为什么应该以这种方式编写，这一点很重要。

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

如果您愿意，可以在声明上应用font-weightand以使用相同字体的变体，但您需要对这些特征进行具体和精确的描述。有一些方法可以做到这一点。font-style@font-face

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

使用'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;
}

因此，要使用您想要的变体，您必须调用与font-family它对应的 并在规则上声明font-weight: normaland font-style: normal。如果您不这样做，浏览器可能会默认将“仿粗体/斜体”应用于具有此规则的元素。' faux'样式可以强制元素与它一起显示，即使已经使用斜体或粗体字体。问题在于字体总是看起来很丑，因为它不是看起来的样子。

当您定义“普通”字体时也会发生同样的情况，例如，在一个<p>元素上，并在其中放置一个<strong>or <em>。<strong>和将<em>强制字体上的粗体/斜体过程。为避免这种情况，您需要将正确font-family的，指定为粗体/斜体，应用于<strong>and的规则，并将<em>它们各自的属性（font-weight和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;
}

但它有一个问题。如果您的字体未加载，则选择的后备将失去其权重/样式。这将我们引向下一条道路。

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

如果您的字体未加载，这种方式更容易正确处理多个权重和样式以及后备。使用相同的示例：

@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要访问哪个声明以及要使用哪种字体变体。

确保您的体重和样式是否匹配。如果是这样，当您使用<strong>或<em>在使用@font-face您创建的父级时，它将加载正确的声明。

在这些嵌入风格化方法的源代码中（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. 我想我选择的两个足以胜任这项工作。

资料来源： http: //www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-字体声明/

编辑1：

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

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

于 2014-02-06T21:34:18.607 回答
2

您可以将数字添加到 font-weight 属性，例如添加到轻型版本。

font-weight: normal; //  light version as it is.
font-weight: 700; // makes light version bolder.
于 2012-04-06T16:22:52.320 回答