at 规则 @font-face 的 CSS 描述符 size-adjust 指定了与此字体关联的字形轮廓和度量的乘数。
CSS 描述符 size-adjust 的行为类似于相应的 font-size-adjust 属性。描述符通过匹配 ex 高度来计算每种字体的调整。
可能的值
size-adjust CSS 描述符可以具有以下值：
- <percentage>：百分比值，起始值为 100%。
与此字体关联的所有指标都根据给定的百分比进行调整，其中包括字形前进、基线表和由@font面描述符提供的替代。
语法
size-adjust: 80%;
CSS size-adjust - 覆盖本地字体的指标
以下示例演示了 @font-face 规则的大小调整描述符的使用。
<html>
<head>
<style>
@font-face {
font-family: "size adjust";
src: local(Arial Bold);
size-adjust: 170%;
}
h1.with-adjustment {
font-family: "size adjust";
}
h1 {
border: 2px solid red;
width: max-content;
}
</style>
</head>
<body>
<h1>No size adjust</h1>
<h1 class="with-adjustment">Size Adjust Applied</h1>
</body>
</html>
在上面的例子中：
- 规则 @font-face 使用大小调整的值进行声明。
- 提供了一个字体系列标识符，该标识符用于 h1 元素上的类 .with-adjustment。
- 根据 size-adjust 的值，将显示 h1 元素中的文本。
- 尝试更改 size-adjust 的值，并查看更改后的效果。
CSS size-adjust - 覆盖回退字体的指标
以下示例演示了如何使用 @font-face 的大小调整描述符 size-adjust 来表示回退字体。
<html>
<head>
<style>
@font-face {
font-family: "web font";
src: url("https://example.com/font.woff");
size-adjust: 200%;
}
@font-face {
font-family: "size adjust";
src: local(Verdana);
size-adjust: 180%;
}
h1.with-adjustment {
font-family: "web font", "size adjust";
}
h1 {
border: 2px solid red;
width: max-content;
}
</style>
</head>
<body>
<h1>No size adjust</h1>
<h1 class="with-adjustment">Size Adjust Applied</h1>
</body>
</html>
在上面的例子中：
- 有两个 at 规则 @font-face 声明。首先，使用 Web 字体进行大小调整的值，然后使用本地字体。
- 提供了两种字体的字体系列标识符，该标识符用于 h1 元素的 .with-adjustment 类。
- 根据 size-adjust 的值，将显示 h1 元素中的文本，对于本地字体，因为 Web 字体不可用。
- 尝试更改 size-adjust 的值，并查看更改后的效果。
