CSS @font-face - size-adjust

Quiz

The CSS descriptor size-adjust for the at-rule @font-face specifies a multiplier for glyph outlines and metrics that are associated with this font.

The size-adjust CSS descriptor behaves similar to the corresponding font-size-adjust property. The descriptor calculates an adjustment for every font by matching the ex heights.

Possible Values

The size-adjust CSS descriptor can have the following value:

<percentage>: A percentage value, with starting value of 100%.

All the metrics that are associated with this font are adjusted based on the given percentage, which includes glyph advances, baseline tables, and overrides that are provided by @font-face descriptors.

Syntax

size-adjust: 80%;

CSS size-adjust - Overriding Metrics Of Local Font

Following example demonstrates the use of size-adjust descriptor of @font-face at-rule.

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

In the above example:

The at-rule @font-face is declared with a value for size-adjust.
A font-family identifier is provided which is used in the class .with-adjustment on h1 element.
Based on the value of size-adjust the text in h1 element is displayed.
Try changing the value of the size-adjust and see the changed effect.

CSS size-adjust - Overriding Metrics Of Fallback Font

Following example demonstrates the use of size-adjust descriptor of @font-face at-rule for a fallback font.

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

In the above example:

There are two at-rules @font-face declared. First, with a value for size-adjust with a web font and second with a local font.
A font-family identifiers of both the font faces are provided which is used in the class .with-adjustment on h1 element.
Based on the value of size-adjust the text in h1 element is displayed, for the local font face, as the web font face is not available.
Try changing the value of the size-adjust and see the changed effect.

Print Page