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

Question

我有两个字体文件,如: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过渡.我如何实现这一目标？

Answer 1

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

Answer 2

要使用嵌入字体()font-weight的font-style属性@font-face并不是那么简单.您需要关注一些项目.

1 - @font-face语法:

在所有浏览器上使用字体语法非常重要.拥有许多资源的保罗爱尔兰人写了"防弹语法",如上所示,经过多次改进:

@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 @字体面对面语法"),是最新的,并从工程IE6上iOS,Android.重要的是要查看链接以了解为什么应该以这种方式编写它.

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

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

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

使用'Bulletproof语法',假设您要加载'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: normal和font-style: normal.如果不这样做,浏览器可以将"faux bold/italic"应用于默认情况下具有此规则的元素.即使已经使用斜体或粗体字体,"仿"造型也会强制元素与其一起显示.问题是字体总是看起来很难看,因为它不是看起来的方式.

例如,在元素上定义"普通"字体时会发生相同的情况,<p>并且在其内部放置一个<strong>或<em>.在<strong>和<em>将迫使在字体黑体/斜体过程.为了避免这种情况,您需要将正确的font-family,取决于粗体/斜体的规则应用于规则,<strong>并将<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-family名称,但不同的权重和样式

如果你的字体没有加载,这种方式更容易处理几个权重和样式和正确的回退.使用相同的例子:

@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:

没有必要使用很多字体扩展名.该.woff类型出席几乎所有的浏览器,除了IE浏览器,如果你需要给IE8的支持(只接受.eot格式).(http://caniuse.com/#feat=fontface)

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