DEV Community

Nicolás J. Engler
Nicolás J. Engler

Posted on

Explain the new spec for CSS' font-variant property like I'm five

#css #explainlikeimfive #styles #discuss

Top comments (3)

Collapse
 
kspeakman profile image
Kasey Speakman • • Edited

The old font-variant from CSS 2 only allowed you to have text with lower case capitals. The new one in CSS 3 also allows you to activate OpenType features on fonts. The font has to include support for the feature for it to work.

From the spec

... the ‘font-variant’ property has been expanded for CSS3. It now functions as a shorthand for a set of properties that provide control over stylistic font features.

Collapse
 
nicolasjengler profile image
Nicolás J. Engler •

Thought so, but initially I believed that the possibilities would be all the same for every font family independently of the OpenType features available for the typeface itself. I guess the next question should be "Explain OpenType features like I'm five", just kidding! 😂

Thanks a ton!

Collapse
 
kspeakman profile image
Kasey Speakman • • Edited

The OpenType features I linked above visually shows what different features do if the fonts support them.

typofonderie.com/font-support/open...

Read next

braide profile image

Variable Fonts for Dynamic Typography

Katerina Braide -

gladiatorsbattle profile image

How to Create a Magical Christmas Scene with Animated Snowflakes and Santa in JavaScript

Gladiators Battle -

silversonicaxel profile image

How to add a radial gradient around the mouse cursor on the background of a page in Vue.js

Alessandro Rabitti -

giuliano1993 profile image

Color Palette is served with ShadCn Theme Editor

Giuliano1993 -