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中，字体的重量将光，而不是 300 ）。

在阅读W3 spec后，听起来他们确实打算将这些名字与一个数字相匹配，但这看起来很像，所以我想我错过了什么。

Answer 1

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

除了数值之外，您可以使用@font-face规则中的font-weight descriptor指定的唯一关键字是normal和bold（而bolder和{{ 1}}是相对值，因此无法指定）。即使它允许您指定自定义关键字，也必须重新调整lighter属性，以允许这些自定义关键字和浏览器必须识别这些自定义关键字，而这些关键字并非如此。

Answer 2

您可以使用四个字符串来定义font-weight：normal，bold，bolder和lighter，其中两个是相对于父母的体重。这一切都在您链接到的规范中进行了描述。

如果你想制作自己的并使用预处理器，你可以为你的权重创建变量，并拥有你想要的任意数量。

<强>萨斯

<强> variables.scss.css

$verythin: 100;
$thin: 200;
$medium: 300;
$thick: 500;
$unnecessarilybold: 600;

<强> main.scss.css

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

Answer 3

CSS中的设计决定是使用100到900之间的数字而不是名称。这背后的基本原因是字体制造商之间使用名称并不一致。

您无法在CSS中定义任何符号名称。这也是一个有意的设计决策：CSS是样式表语言，而不是编程语言。

在实践中，您在野外遇到的大多数字体，如人们计算机中常用的字体或可合法用作可下载字体的免费字体，只有两个权重，400和700，它们具有预定义的符号名称。所以问题实际上并不是很相关。例如，当使用少数具有其他权重的Google字体时，Google会通知您要使用的数字权重。（在这种情况下，这只是一个惯例;你可以使用任何数字，只要你是一致的 - 这是重要的实际字体。）

CSS：按名称定义font-weight

3 个答案: