0

我想知道是否有办法用字符串而不是数字来定义@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 规范之后，听起来他们确实打算让您将名称与数字匹配，但这似乎很愚蠢，所以我认为我遗漏了一些东西。

4

3 回答 3

2

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

除了数值之外，您可以在规则中使用font-weight描述符指定的唯一关键字是and （而and是相对值，因此无法指定）。即使它允许您指定自定义关键字，也必须重新指定该属性以允许这些自定义关键字，并且浏览器必须识别这些自定义关键字，而它们不能。@font-facenormalboldbolderlighterfont-weight

于 2013-09-06T17:58:21.513 回答
2

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

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

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

于 2013-09-06T19:48:24.103 回答
2

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

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

萨斯

变量.scss.css

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

主.scss.css

@font-face {
    font-family: 'My Font';
    src: url('../fonts/MyFont/thin.eot');
    …
    font-weight: $thin;
    font-style: normal;
}
于 2013-09-06T18:00:22.213 回答