Skip to content

Instantly share code, notes, and snippets.

@xiaochengh
Last active October 11, 2023 23:58
Show Gist options
  • Save xiaochengh/3aae8a97d1b0388c8e701819b63e2c49 to your computer and use it in GitHub Desktop.
Save xiaochengh/3aae8a97d1b0388c8e701819b63e2c49 to your computer and use it in GitHub Desktop.
Explainer: Font Metrics Override Descriptors

Explainer: Font Metrics Override Descriptors

** Not standardized yet!! **

Spec

This doc explains descriptors ascent-override, descent-override, line-gap-override and advance-override for CSS @font-face rule.

Usage:

@font-face {
  font-family: ...;
  src: ...;
  ascent-override: 80%;
  descent-override: 20%;
  line-gap-override: 0%;
  advance-override: 110%;
  ...
}

In any element using this font, the ascent, descent and line gap of each line will be set to 80%, 20% and 0%, respectively, of the used font size. All characters will be 110% as wide as originally. See more examples in the spec.

Demos (need Chrome M90+ and --enable-blink-features=CSSFontFaceAdvanceOverride flag):

Use case: reduce layout shifting caused by web fonts

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

@font-face {
  font-family: fallback-to-local;
  src: local(Some Local Font);
  /* Override metric values to match cool-web-font */
  ascent-override: 125%;
  descent-override: 25%;
  line-gap-override: 0%;
  advance-override: 109%;
}

<div style="font-family: cool-web-font, fallback-to-local">Title goes here</div>
<img src="https://example.com/largeimage" alt="A large image that you don’t want to shift">

The image will not be shifted as much when the user agent finishes loading and switches to use the web font (assuming the override values are similar to the web font’s natural metrics).

Use case: interoperable text layout

With ascent-override, descent-override and line-gap-override, web authors can override the metrics of a font to ensure the same text layout across browsers and platforms, which could otherwise be a tricky issue.


(An older version of this explainer is at here. This version adds advance-override.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment