CSS:按名称定义字体大小

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

除了数值之外,您可以使用指定的唯一关键字 font-weight descriptor 在里面 @font-face 规则是 normal 和 bold (而 bolder 和 lighter 是相对值,因此无法指定)。即使它允许您指定自定义关键字 字体加粗 属性必须重新指定才能允许这些自定义关键字,而浏览器必须识别这些自定义关键字。

有四个字符串可以用来定义 font-weight : normal , bold , bolder 和 lighter ,第二个是相对于父对象的重量。所有这些都在您链接到的规范中进行了描述。

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

萨斯

变量.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;
}

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

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

在实践中,你在野外遇到的大多数字体,比如人们电脑上常见的字体,或者你可以合法使用的免费字体,都只有两个权重,400和700,它们有预定义的符号名称。因此,这个问题实际上并不是很重要。例如,当使用少数具有其他权重的谷歌字体时,谷歌会通知您要使用的数字权重。(在这种情况下,这实际上只是一种惯例;你可以使用任何数字,只要你保持一致——重要的是实际的字体。)