Skip to content

Instantly share code, notes, and snippets.

@xiaochengh

xiaochengh/explainer.md

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