CSS @font-face - size-adjust
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.
To Continue Learning Please Login
Login with Google