- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - @font-feature-values
CSS at-rule @font-feature-values allows you to define custom values for OpenType font features, such as ligatures, stylistic alternates, swashes, or other advanced typographic features. This rule provides a way to control the usage of these features within specific elements of your document.
The @font-feature-values rule consists of two parts:
Selector: Specifies the element or elements to which the font features will be applied.
Font feature declarations: Defines the custom values for specific OpenType features.
You can use the @font-feature-values at-rule inside any CSS conditional-group-at-rule or at the top level of your CSS.
Possible Values
@swash − Defines a feature name that works with the swash() function of font-variant-alternates. It allows only one value. For example: ident1: 2 is valid, whereas ident1: 2 4 is invalid.
@annotation − Defines a feature name that works with the annotation() function of font-variant-alternates. It allows only one value. For example: ident1: 2 is valid, whereas ident1: 2 4 is invalid.
@ornaments − The ornaments() functional notation in font-variant-alternates for a feature name allows only a single value, such as ident1: 2 is valid, while ident2: 2 4 is not valid.
@stylistic − The stylistic() functional notation in font-variant-alternates for a feature name can only have a single value, such as ident1: 2 is valid, while ident2: 2 4 is not valid.
@styleset − The stylistic() functional notation in font-variant-alternates for a feature name allows an unlimited number of values, such as ident1: 2 4 12 1 maps to the OpenType values ss02, ss04, ss12, and ss01. Values greater than 99 are valid but do not correspond to any OpenType values and are disregarded.
@character-variant − The character-variant() functional notation in font-variant-alternates for a feature name allows either one or two values, such as ident1: 3 maps to cv03=1, and ident2: 2 4 maps to cv02=4, but ident2: 2 4 5 is invalid.
Syntax
@font-feature-values = @font-feature-values <family-name># { <declaration-rule-list> }
CSS @font-feature-values - @swash
The following example demonstrates the use of @swash rule that sets the swash feature for the character 'fancy' to a value of 2. The font-variant-alternates: swash(fancy) property is used to apply the swash feature fancy to the text −
<html> <head> <style> @font-face { font-family: CustomFont; src: url("font/Brygada1918-Italic.ttf"); } @font-feature-values "CustomFont" { @swash { fancy: 2; } } .p1 { font-family: "CustomFont"; } .swash-text { font-variant-alternates: swash(fancy); } </style> </head> <body> <p>'fancy' swash styling.</p> <p class="swash-text p1">'fancy' swash styling.</p> </body> </html>
CSS @font-feature-values - @annotation
The following example demonstrates the use of @font-feature-values to define annotation styles by assigning 's' to the value of 4. The font-variant-alternates: annotation(s) property is then used for applying the annotation feature 's' to the text −
<html> <head> <style> @font-face { font-family: CustomFont; src: url("font/Brygada1918-Italic.ttf"); } @font-feature-values "CustomFont" { @annotation { s: 4; } } .p1 { font-family: "CustomFont"; } .annotation-text { font-variant-alternates: annotation(s); } </style> </head> <body> <p class="annotation-text p1">'s' annotation styling.</p> <p>'s' annotation styling.</p> </body> </html>
CSS @font-feature-values - @ornaments
The following example demonstrates the use of @font-feature-values to define ornaments styles by assigning 'test' to the value of 12. The font-variant-alternates: ornaments(test) property is then used for applying the ornaments feature 'test' to the text −
<html> <head> <style> @font-face { font-family: CustomFont; src: url("font/SansationLight.woff"); } @font-feature-values "CustomFont" { @ornaments { test: 12; } } p { font-family: "CustomFont"; } .ornaments-text { font-variant-alternates: ornaments(test); } </style> </head> <body> <p class="ornaments-text">'test' ornaments styling.</p> <p>'test' ornaments styling.</p> </body> </html>
CSS @font-feature-values - @stylistic
The following example demonstrates the use of @font-feature-values to define stylistic styles by assigning 'data' to the value of 2. The font-variant-alternates: stylistic(data) property is then used to apply the stylistic feature 'data' to the text −
<html> <head> <style> @font-face { font-family: CustomFont; src: url("font/Brygada1918-Italic.ttf"); } @font-feature-values "CustomFont" { @stylistic { data: 2; } } p { font-family: "CustomFont"; } .ornaments-text { font-variant-alternates: stylistic(data); } </style> </head> <body> <p class="ornaments-text">'data' stylistic styling.</p> <p>'data' stylistic styling.</p> </body> </html>
CSS @font-feature-values - @styleset
The following example demonstrates the @font-feature-values to define a styleset feature named "fancy" with OpenType values 2, 4, 12, and 1. The font-variant-alternates property with the styleset() functional notation is used to apply the "fancy" styleset −
<html> <head> <style> @font-face { font-family: CustomFont; src: url("font/SansationLight.woff"); } @font-feature-values "CustomFont" { @styleset { fancy: 2 4 12 1; } } p { font-family: "CustomFont"; } .ornaments-text { font-variant-alternates: styleset(fancy); } </style> </head> <body> <p class="ornaments-text">'fancy' styleset styling.</p> <p>'fancy' styleset styling.</p> </body> </html>
CSS @font-feature-values - @character-variant
The following example demonstrates the use of @font-feature-values to define a character-variant feature named "test1" with values 2,and 4. The font-variant-alternates property with the styleset() functional notation is then applied with "test1" character-variant −
<html> <head> <style> @font-face { font-family: CustomFont; src: url("font/SansationLight.woff"); } @font-feature-values "CustomFont" { @character-variant { test1: 2 4; } } p { font-family: "CustomFont"; } .ornaments-text { font-variant-alternates: character-variant(test1); } </style> </head> <body> <p class="ornaments-text">'test1' character-variant styling.</p> <p>'test1' character-variant styling.</p> </body> </html>
To Continue Learning Please Login
Login with Google