如何使用font-weight和font-face字体？ [英] How to use font-weight with font-face fonts?

问题描述

我有两个字体文件，如：FONT-light和FONT-bold。两个都来自@ font-face kit，所以每个版本都有5个字体文件（OGV，TTF，WOFF，EOT）。

I've got two font files like: FONT-light and FONT-bold. Both come from @font-face kit so each version has like 5 font files included (OGV, TTF, WOFF, EOT).

从light版本转为bold版本我必须使用 font-family：FONT-light; 然后 font-family：FONT-bold; 。我想使用 font-weight：light; 和 font-weight：bold; 转换。如何实现这一目标？

To go from light version to bold version I have to use font-family: FONT-light; and then font-family: FONT-bold;. I want to use font-weight: light; and font-weight: bold; instead because I need it to CSS3 transitions. How do I achieve that?

推荐答案

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

这篇关于如何使用font-weight和font-face字体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！