#557: [Review Request] New CSS @font-face descriptors for overriding font metrics

Visit on Github.

Opened Sep 16, 2020

Saluton TAG!

I'm requesting a TAG review of new CSS descriptors ascent-override, descent-override and line-gap-override for @font-face rule. (design doc)

Example usage:

@font-face {
  font-family: arial;
  src: local(Arial), url("http://example.com/arial.woff");
  ascent-override: 60%;
  descent-override: 40%;
  line-gap-override: 0%;
}

This allows web authors to override the metrics of a font and control text position within a line: the ascent, descent and line gap are set to exactly 60%, 40% and 0% of the em size. See also demo and its video recording.

There are two major use cases:

  1. Improve interoperability. Different browsers on different platforms currently use different pieces of data from a font file, causing interop issues. This can be fixed by overriding the font metrics.
  2. Reduce layout shifting caused by web fonts, by overriding the metrics of the fallback font to match the web font
  • Explainer¹ (minimally containing user needs and example code): as given above
  • Specification URL: Please refer to design doc for now. CSSWG has just resolved to add these descriptors and will add a spec soon
  • Tests: Currently as Chromium web tests. Will upstream to WPT soon.
  • Security and Privacy self-review²: None
  • Primary contacts (and their relationship to the specification):
    • Xiaocheng Hu (@xiaochengh), Google
  • Organization(s)/project(s) driving the specification: CSSWG
  • External status/issue trackers for this specification: Chrome status

Further details:

  • I have reviewed the TAG's API Design Principles
  • Relevant time constraints or deadlines: Oct 15, 2020 (Chrome M87 Beta Promotion)
  • The group where the work on this specification is currently being done: CSSWG
  • Major unresolved issues with or opposition to this specification: None

You should also know that...

[please tell us anything you think is relevant to this review]

We'd prefer the TAG provide feedback as (please delete all but the desired option):

💬 leave review feedback as a comment in this issue and @-notify @xiaochengh

Discussions