Skip to content

Instantly share code, notes, and snippets.

@xiaochengh

xiaochengh/explainer.md

Last active Jul 23, 2021
Embed
What would you like to do?
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