CSS @font-face - ascent-override

The CSS descriptor ascent-override for the at-rule @font-face determines the ascent metric for the font. This metric is the height above the baseline, that is used by CSS to lay out the line boxes in an inline formatting.

Following digram depicts ascent metric:

Possible Values

The ascent-override CSS descriptor can have one of the following values:

  • normal: The metric value is taken from the font file. It is the default value.

  • <percentage>: Any percentage value.

Syntax

ascent-override: normal | 80%;

CSS ascent-override - Overriding Metrics Of Local Font

Following example demonstrates the use of ascent-override descriptor of @font-face at-rule.

<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>

In the above example:

  • The at-rule @font-face is declared with a value for ascent-override.

  • A font-family identifier is provided which is used in the class .with-override on h1 element.

  • Based on the value of ascent-override the text in h1 element is displayed according to the specified value from the baseline (above).

  • Try changing the value of the ascent-override and see the changed effect.

Advertisements