Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does the forward slash mean in the CSS font shorthand?

Tags:

css

fonts

People also ask

What does forward slash mean in CSS?

It simply means font-size and line-height font: 12px/18px /*12px font-size and 18px line-height*/

What is a font shorthand?

The font CSS shorthand property sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font.

What is font weight?

Font weight is the “value” placed on your font that will determine how bold or light your text will appear. There are many “values” that you can use that provide a great deal of flexibility towards creating the font weight that works best for how you want to display your text.


12px is the font size, 18px is the line height.

The syntax is based on typographical notation for specifying the respective sizes, and is only applicable to the font shorthand property. In other words, the above declaration simply expands to the following:

font-size: 12px;
line-height: 18px;

As always, if you set the line height to a relative value (e.g. percentage or ems), it's calculated relative to the font size.

W3C CSS2.1 font property reference
W3C CSS3 Fonts Module font property reference (the syntax carries over from CSS2.1)


It's equivalent to:

font-size: 12px;
line-height: 18px;