我有两个字体文件,例如: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过渡。我该如何实现?
@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;
}
要在嵌入式字体(font-weight
)上使用font-style
和@font-face
属性并不是那么简单。您需要注意一些事项。
@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
开始工作。重要的是要仔细查看链接,以了解为什么要以这种方式编写。
font-weight
和font-style
[如果需要,可以在font-weight
声明上应用font-style
和@font-face
以使用相同字体的变体,但是您需要对这些特征进行特定而精确的描述。有一些方法可以做到。
使用'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
但是存在问题。如果您的字体无法加载,则所选的后备广告将失去其粗细/样式。这将我们引向另一种方式。
如果不加载字体,通过几种粗细,样式和正确的后备方法更容易正确处理。使用相同的示例:
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
的变化。我想我选择的两个已经足够胜任这项工作。
来源:font
weight
无需使用很多字体扩展名。如果需要对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文件中。
您可以将数字添加到font-weight属性,例如,添加到简易版。
很好的解释。但我有个问题。方法2.2似乎是要走的路。是否有使用2.1的理由?