Skip to content

Instantly share code, notes, and snippets.

@xiaochengh
Last active December 14, 2022 09:21
Show Gist options
  • Save xiaochengh/da1fa52648d6184fd8022d7134c168c1 to your computer and use it in GitHub Desktop.
Save xiaochengh/da1fa52648d6184fd8022d7134c168c1 to your computer and use it in GitHub Desktop.
Explainer: Font Metrics Override Descriptors

Explainer: Font Metrics Override Descriptors

(A newer version is at here, where a new descriptor advance-override is added)

Spec

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

Basic usage:

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

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.

Demos (need Chrome M86+ and --enable-blink-features=CSSFontMetricsOverride flag):

Use case: interoperable text layout

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.

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%;
}

<div style="font-family: cool-web-font, fallback-to-local">Title goes here</div>
<img src="https://example.com/large-image" alt="A large image that creates a lot of CLS when shifted">

In this way, the image will not be vertically shifted when the browser finishes loading and switches to use the web font.

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