html - 最佳实践 - @font-face 正常/粗体/粗体

Question

我有一个关于通过 CSS 向网页添加自定义字体的 @font-face 命令的问题。

我一直这样使用@font-face:

@font-face {
    font-family: "MyFont";
    src: url('url-to-font') [eot, woff, ttf, ...];
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "MyFont-Bold", [Fallbacks...];
    src: url('url-to-font') [eot, woff, ttf, ...];
    font-weight: bold;
    font-style: normal;
}

* {
    font-family: "MyFont", [Fallbacks...]
}

h1 {
    font-family: "MyFont-Bold", [Fallbacks...];
}

有两件事:可以使用通配符选择器 (*) 将字体应用到整个页面吗？有没有更好的方法？

是否可以省略:

font-family: "MyFont-Bold";

然后说:

font-family: "MyFont";
font-weight: bold;

如果是，这样做有什么好处吗？

非常感谢!

Answer 1

你通常会这样做:

@font-face {
    font-family: "MyFont";
    src: url('font-regular.woff'); /* note filename */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "MyFont";
    src: url('font-bold.woff'); /* note different filename */
    font-weight: 700;
    font-style: normal;
}

h1 {
    font-family: "MyFont", [Fallbacks...];
    font-weight: 700; /* automatically picks the bold flavour now */
}