如何将字体粗细与字体字体一起使用? [英] How to use font-weight with font-face fonts?

问题描述

我有两个字体文件，例如:FONT-light 和 FONT-bold.两者都来自@font-face 套件，因此每个版本都包含 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).

要从浅色版本到粗体版本，我必须使用 font-family: FONT-light; 然后是 font-family: FONT-bold;.我想使用 font-weight: light; 和 font-weight: bold; 代替，因为我需要它到 CSS3 过渡.我如何做到这一点?

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/

这篇关于如何将字体粗细与字体字体一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！