@font-face.size-adjust - CSS

The size-adjust CSS descriptor for the @font-face at-rule defines a multiplier for glyph outlines and metrics associated with this font. This makes it easier to harmonize the designs of various fonts when rendered at the same font size.

The size-adjust descriptor behaves in a similar fashion to the font-size-adjust property. It calculates an adjustment per font by matching ex heights.

Syntax

size-adjust: 90%;

Values

<percentage>: A <percentage> value with an initial value of 100%.

All metrics associated with this font are scaled by the given percentage. This includes glyph advances, baseline tables, and overrides provided by @font-face descriptors.

Formal definition

Related at-rule	`@font-face`
Initial value	`100%`
Percentages	as specified
Computed value	as specified

Formal syntax

size-adjust = 
  <percentage [0,∞]>

Examples

>

Overriding metrics of a fallback font

The size-adjust property can help when overriding the metrics of a fallback font to better match those of a primary web font.

@font-face {
  font-family: web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: local-font;
  src: local("Local Font");
  size-adjust: 90%;
}

Specifications

Specification
CSS Fonts Module Level 5> # size-adjust-desc>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`size-adjust`	92	92	92	78	17	92	92	No	17	16.0	92	17

W3cubDocs

size-adjust