字体重量 [英] font-face weight

问题描述

我使用购买字体（Museo Sans）作为我正在处理的应用程序中的自定义字体。当我购买它给我的文件包含不同权重的Web字体文件：MuseoSans100Regular，MuseoSans300Regular等。在@ font-face中有一种方法来指定用于不同权重的文件，以便我可以这样做： / p>

I am using a purchase font (Museo Sans) for a custom font in an app I am working on. The files given to me when I purchased it contain web font files for different weights: MuseoSans100Regular, MuseoSans300Regular, etc. Is there a way in @font-face to specify the files to use for the different weights so that I can do this:

font-family: MuseoSans;
font-weight: 300;

而不是这样：

font-family: MuseoSans300;

推荐答案

是的，你必须指定哪个文件在两个不同的 @ font-face 定义中的 font-weight ：

Yes, you have to specify which file is for which font-weight in two different @font-face definitions:

@font-face {
    font-family: 'MuseoSans';
    src: url('../font/museo_sans_100.woff');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'MuseoSans';
    src: url('../font/museo_sans_300.woff');
    font-weight: 300;
    font-style: normal;
}

h1, p {
    font-family: MuseoSans;
}

h1 {
    font-weight: 300; /* uses museo_sans_300.woff */
}

p {
    font-weight: 100; /* uses museo_sans_100.woff*/
}

这篇关于字体重量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！