字体重量

Question

我在我正在使用的应用程序中使用购买字体(Museo Sans)作为自定义字体.我购买时提供给我的文件包含不同权重的Web字体文件:MuseoSans100Regular,MuseoSans300Regular等.在@ font-face中是否有一种方法可以指定用于不同权重的文件,以便我可以这样做:

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

而不是这个:

font-family: MuseoSans300;

Answer 1

是的,您必须font-weight在两个不同的@font-face定义中指定哪个文件:

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