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

brunociccarino profile image

Go for DevOps: From scratch to Hero Guide 🚀

Bruno Ciccarino λ -

ssukhpinder profile image

Edition 3 — Monday Memes

Sukhpinder Singh -

turingvangisms profile image

CSS vs. Tailwind CSS

Turing -

toychicken profile image

Using Hugo Render hooks to make links bend to your will

Leigh Garland -