CSSFontFeatureValuesRule

Instance properties

Inherits properties from its ancestor CSSRule.

CSSFontFeatureValuesRule.annotation

A user defined value definition and value that applies an alternate annotation of the font.

CSSFontFeatureValuesRule.characterVariant

A user defined value definition and value that applies a stylistic alternatives for characters of the font.

CSSFontFeatureValuesRule.fontFamily

A string that identifies the font family this rule applies to.

CSSFontFeatureValuesRule.ornaments

A user defined value definition and value that applies alternative ornaments of the font.

CSSFontFeatureValuesRule.styleset

A user defined value definition and value that applies alternate style sets of the font.

CSSFontFeatureValuesRule.stylistic

A user defined value definition and value that applies alternative glyphs of the font.

CSSFontFeatureValuesRule.swash

A user defined value definition and value that applies alternative swashes of the font.

Instance methods

Inherits methods from its ancestor CSSRule.

Examples

Read font family

In this example, we declare two @font-feature-values one for the Font One font family, and the other for Font Two. In both declarations we define that the name "nice-style" can be used to represent the styleset alternate glyphs for both of the fonts, specifying the index for that alternate in each font family. The alternate glyphs are then applied for any .nice-look class, using font-variant-alternates and passing the name to the styleset() function.

We then use the CSSOM to read these declaration as CSSFontFeatureValuesRule instances, displaying them into the log.

CSS

/* At-rule for "nice-style" in Font One */
@font-feature-values Font One {
  @styleset {
    nice-style: 12; /* name used to represent the alternate set of glyphs at index 12 */
  }
}

/* At-rule for "nice-style" in Font Two */
@font-feature-values Font Two {
  @styleset {
    nice-style: 4;
  }
}

/* Apply the at-rules with a single declaration */
.nice-look {
  font-variant-alternates: styleset(
    nice-style
  ); /* name selects different index for same alternate in different fonts */
}

<pre id="log"></pre>

#log {
  height: 40px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

const rules = document.getElementById("css-output").sheet.cssRules;

const fontOne = rules[0]; // A CSSFontFeatureValuesRule
log(`The 1st '@font-feature-values' family: "${fontOne.fontFamily}".`);

const fontTwo = rules[1]; // Another CSSFontFeatureValuesRule
log(`The 2nd '@font-feature-values' family: "${fontTwo.fontFamily}"`);

Specifications

Browser compatibility

See also

• @font-feature-values