如何使用字体重量字体面字体？(How to use font-weight with font-fa

我有一个像两个字体文件：FONT-光FONT-大胆。 都来自@字体面试剂盒所以每个版本具有像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;
}

From the tutorial: 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 - 使用一个FONT-FAMILY每个变化

使用“防弹语法”，假设你要加载的“正常”，“ 大胆”和“斜体”的变化，我们有：

@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 。 如果不这样做，浏览器可以应用“仿粗体/斜体”来，默认情况下有这样的规则的元素。 在“人造”的造型作品迫使元素与它显示，即使已经使用斜体或加粗字体。 这个问题是字体总是看起来丑陋，因为是不是有人看的方式。

当你定义一个“正常”的字体，例如，在同一个发生<p>元素，并且在它的内部，放置一个<strong>或<em> 所述<strong>和<em>将迫使在字体的粗体/斜体过程。 为了避免这种情况，你需要应用正确的font-family ，destinated做是粗体/斜体，一个规则<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;
}

但出了问题。 如果你的字体不加载choosen将失去它们的权重/样式回退。 这使我们在未来的方式。

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：

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

其他尖端，也许是有用的是嵌入在使用CSS的字体base64编码。 这将有助于避免大量的请求，但你必须记住，它会overwight CSS文件。 这可以处理组织CSS内容和字体，赶紧给第一CSS规则，在一个很小的文件，另一个CSS文件交付他人，在结束<body>标签。

Answer 3:

您可以将号码添加到font-weight属性，例如光版本。

font-weight: normal; //  light version as it is.
font-weight: 700; // makes light version bolder. 

文章来源: How to use font-weight with font-face fonts?