CSS @font-face - size-adjust_CSS 菜鸟教程

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 的值，并查看更改后的效果。

<< CSS @font-face - line-gap-override CSS @font-face - src >>