CSS @font-face - descent-override

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

Following digram depicts descent metric:

Possible Values

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

descent-override: normal | 80%;

CSS descent-override - Overriding metrics of local font

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

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

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

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

In the above example:

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

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

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

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

Advertisements