CSS @font-face - ascent-override

at 规则 @font-face 的 CSS 描述符 ascent-override 决定了字体的上升度量。此度量是基线上方的高度，CSS 使用它以内联格式布局行框。

以下 digram 描述了上升指标：

可能的值

ascent-override CSS 描述符可以具有以下值之一：

normal：指标值取自字体文件。这是默认值。
<percentage>：任何百分比值。

语法


ascent-override: normal | 80%;

CSS ascent-override - 覆盖本地字体的指标

以下示例演示了如何使用 @font-face 对规则的 ascent-override 描述符。


<html>
<head>	
<style>
	 	/* Override Local Arial Bold as a new family */
	 	@font-face {
	 	 	 font-family: "Ascent Override Font";
	 	 	 src: local(Arial Bold);
	 	 	 ascent-override: 70%;
	 	}

	 	h1.with-override {
	 	 	 font-family: "Ascent Override Font";	
	 	}

	 	h1 {
	 	 	 border: 2px solid red;
	 	 	 width: max-content;
	 	}
</style>
</head>
<body>
	 	<h1>No Ascent Override</h1>	
	 	<h1 class="with-override">Ascent Override Applied</h1>
</body>
</html>

在上面的例子中：

规则 @font-face 声明为 ascent-override。
提供了一个字体系列标识符，该标识符用于 h1 元素上的类 .with-override。
根据 ascent-override 的值，h1 元素中的文本将根据基线（上图）的指定值显示。
尝试更改 ascent-override 的值，并查看更改后的效果。

打印本页