字体类型权重

Question

我正在开发一个应用程序，使用了一种购买的字体（Museo Sans）作为自定义字体。当我购买这种字体时，提供给我的文件包含不同权重的Web字体文件：MuseoSans100Regular、MuseoSans300Regular等。在@font-face中是否有一种方法可以指定不同权重使用的文件，以便我可以做到这一点：

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

不要这样：

font-family: MuseoSans300;

- nicknisi

---

这可以使用JS完成，但强烈不建议。 - Kuldeep Daftary

我不这么认为，我认为你只需要按名称指定你拥有的字体。 - Billy Moat

可能是重复问题: 如何使用@font-face定义粗体、斜体 - feeela

Answer 1

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

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

- feeela

---

我刚刚发现这个问题已经在SO上得到了回答：https://dev59.com/jHE95IYBdhLWcg3wJKh_ - feeela