CSS:按名称定义字体粗细

Question

我想知道是否有一种方法可以用字符串而不是数字来定义@font-face 的粗细:

@font-face {
    font-family: 'My Font';
    src: url('../fonts/MyFont/light.eot');
    …
    font-weight: 'light', 300;
    font-style: normal;
}
@font-face {
    font-family: 'My Font';
    src: url('../fonts/MyFont/thin.eot');
    …
    font-weight: 'thin', 200;
    font-style: normal;
}

我认为如果权重匹配(例如，在 Photoshop 中，字体的权重将是 light，而不是 300，那么将设​​计分解为代码会更容易).

看完W3 spec ，听起来他们确实想让你将名字与数字匹配，但这看起来很愚蠢，所以我想我漏掉了什么。

Answer 1

您链接到的 CSS2.1 规范仅定义了一组与特定数值相对应的特定关键字。它没有说明允许作者为数值定义关键字，无论是在当前还是 future 的规范中。

与数值一起，您可以使用 font-weight descriptor 指定的唯一关键字在 @font-face 中，规则是 normal 和 bold(而 bolder 和 lighter是相对值，因此无法指定)。即使它允许您指定自定义关键字，也必须重新指定 font-weight 属性以允许这些自定义关键字，并且浏览器必须识别这些自定义关键字，但它们不能。