CSS @annotation At-Rule
The @annotation at-rule is a nested CSS at-rule used inside @font-feature-values. It assigns custom names to values for the OpenType nalt (Alternate Annotation Forms) font feature, making those values easier to use with the font-variant-alternates property.
@annotation Syntax
@font-feature-values FontName {
@annotation {
custom-name: value;
}
}The @annotation at-rule must appear inside an @font-feature-values block. Each declaration associates a custom identifier with a numeric OpenType annotation value.
How @annotation Works
The @annotation at-rule provides author-defined names for alternate annotation glyphs supplied by a font. These names can then be referenced through the annotation() function used with font-variant-alternates.
The selected font must contain the corresponding OpenType annotation forms. Defining a value with @annotation does not create new glyphs or add annotation forms to a font.
Using Annotation Values
After a custom annotation value has been defined, the identifier can be passed to the annotation() function.
@font-feature-values ExampleFont {
@annotation {
circled: 1;
}
}
.example {
font-variant-alternates: annotation(circled);
}In this example, circled represents annotation value 1 for the specified font family. The actual appearance depends on the alternate glyphs available in the font.
@annotation Example
The following example defines the custom name circled and uses it with font-variant-alternates.
@font-feature-values ExampleFont {
@annotation {
circled: 1;
}
}
.annotation-example {
font-family: ExampleFont, sans-serif;
font-variant-alternates: annotation(circled);
}Whether a visible alternate appears depends on the selected font, browser support, and whether the font provides an appropriate nalt glyph for that value.
Specifications
The @annotation at-rule is defined by the CSS Fonts specification as one of the feature-value blocks that can be nested inside @font-feature-values.