demo · v134

Style-inspector tree from CSSOM

The motivating consumer for fixing this exposure was tooling — DevTools, design-system linters, font-foundry build pipelines. They walk the stylesheet object model looking for @font-feature-values rules so they can show a designer which glyph variants are wired up. With CSSFontFeaturesValueRule hidden on Window, those tools had to fall back to regex on cssText. Click walk CSSOM below and the tree is built by introspecting this very page’s stylesheet.

probing window.CSSFontFeaturesValueRule…

What this page declares

@font-feature-values "Lora" {
  @styleset { fancy-numerals: 1; small-caps-pseudo: 2; }
  @character-variant { alt-g: 4; alt-a: 7; }
  @swash { sweep: 1; }
  @annotation { circled: 1; }
}

Walk the CSSOM

(no walk yet)

Live sample

12345 67890

12345 67890 — styleset(fancy-numerals)

Algorithmic governance — character-variant(alt-g)

Final flourish — swash(sweep)

see also