CSS @font-face - line-gap-override

The CSS descriptor line-gap-override for the at-rule @font-face determines the line-gap metric for the font. This metric is the line-gap that is recommended.

Possible Values

The line-gap-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

line-gap-override: normal | 80%;

CSS line-gap-override - Overriding Metrics Of Local font

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

<html>
<head> 
<style>
   @font-face {
      font-family: "Line gap override";
      src: local(Arial Bold);
      line-gap-override: 170%;
   }

   h1.with-override {
      font-family: "Line gap override"; 
   }

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

In the above example:

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

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

  • Based on the value of line-gap-override the text in h1 element is displayed.

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

Advertisements