Query font features

[scottkellum]

Query font features in CSS on a particular element. Possibly similar to Adobe’s Web Font Loader but focus on features rather than a specific font. Also because the font might change on various elements, this may need to either be limited to the :root font or work similar to an element query. This may also be similar to the @supports syntax but regarding what the font supports rather than the browser.

sup {
  @font-supports (font-variant-position: sup) {
    font-variant-position: sup;
  }
  @font-supports not (font-variant-position: sup) {
    font-size: 0.6em;
    vertical-align: super;
  }
}

This may also be used for variable font axis:

strong {
  @font-supports (font-variation-settings: 'wght' 632) {
    font-variation-settings: 'wght' 632;
  }
  @font-supports not (font-variation-settings: 'wght' 632) {
    font-weight: bold;
  }
}

This is slightly related to #520 Supported variation font axes and font features are not discoverable

From a CSSRemedy discussion on sub & sup.