Menu
The forward slash is required syntax for separating background position values and background size values. This is to eliminate misinterpretation of the values specified.
If your font size is 10px, your line height will be 10px, 18px, and 20px, respectively. Sets line height as a percentage of the font size of the element. If your font size is 10px, your line height will be 3px, 5px, and 11px respectively. Alternatively, you can specify the “normal” keyword.
This actually sets two properties and is equivalent to:
font-size: 100%;
line-height: 120%;
To quote the official documentation:
The syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts.
As David M said in the comments, it mirrors the typesetting tradition of specifying typeface sizes as “x pt on y pt” to denote the glyph size on line height.
But the example in your question is actually wrong and would be ignored by the browser: you can only combine these two properties in the font shorthand notation, and you must specify at least both the font size and family. Simply writing font: 100%/120%; is therefore not enough; you could add a generic family name to make it valid though, e.g.:
font: 100%/120% serif;
Konrad got this one, but there are a lot of CSS shorthand properties like this that you can use to shorten your style sheets. Some of them look a little cryptic if you're not aware of them.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With