如何在字体字体中使用字体粗细？

问题描述 投票：24回答：4

我有两个字体文件，例如：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过渡。我该如何实现？

css css3 fonts font-face
4个回答
39
投票
@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/

11
投票

要在嵌入式字体（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/，查找'The Fontspring @ font-face语法'），是最新版本，从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'应用于具有此规则的元素。 'faux'样式可强制将元素与元素一起显示，即使已使用斜体或粗体字体也是如此。问题在于字体总是难看，因为它不是那种看起来的样子。

例如，当在<p>元素上定义'Normal'字体并在其中放置<strong>或<em>时，会发生同样的情况。 <strong>和<em>将对字体强制执行粗体/斜体处理。为避免这种情况，您需要将font-family和<strong>各自的属性（<em>和font-weight）设置为[ C0]：

font-style

但是存在问题。如果您的字体无法加载，则所选的后备广告将失去其粗细/样式。这将我们引向另一种方式。

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

如果不加载字体，通过几种粗细，样式和正确的后备方法更容易正确处理。使用相同的示例：

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; } 声明中的粗细和样式用作“标记”。当浏览器在CSS中的其他地方遇到这些权重和样式时，它知道要访问哪个@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的父级中使用@font-face或<strong>时，它将加载正确的声明。

在这些嵌入的样式化方法（<em>）中，有另一种方法结合了我提到的两种方法（2.1和2.2）。但这会带来很多问题，包括'faux bold / italic'，迫使您向@font-face声明正确的http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/，并且对于<strong>而言，font-family会在样式上<em>的不同之处在于classes的变化。我想我选择的两个已经足够胜任这项工作。

来源：fontweight

编辑1：

无需使用很多字体扩展名。如果需要对IE8（仅接受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/类型几乎适用于除IE之外的所有浏览器。 （.woff）

[其他有用的技巧是使用.eot编码将字体嵌入CSS。这将有助于避免很多请求，但是您需要记住，它将使CSS文件变大。这可以通过组织CSS内容和字体来处理，以在一个小文件中快速给出第一个CSS规则，然后在http://caniuse.com/#feat=fontface标记的结尾将另一个CSS规则传递到另一个CSS文件中。

2
投票

您可以将数字添加到font-weight属性，例如，添加到简易版。

0
投票

很好的解释。但我有个问题。方法2.2似乎是要走的路。是否有使用2.1的理由？

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.