What Does the Slash Mean in CSS Font Shorthand?

Understanding the Slash in CSS Font Shorthand

In CSS, the font property provides a convenient way to set multiple font-related properties in a single declaration. However, using a slash in this property can be confusing.

What Does the Slash Signify?

The slash in the following CSS property:

font: 100%/120%;

actually sets two separate properties, equivalent to:

font-size: 100%;
line-height: 120%;

As per the official CSS documentation, this syntax mimics traditional typographical shorthand for specifying typeface sizes as "x pt on y pt," where "x" represents the glyph size and "y" the line height.

Typesetting Tradition

In the print typesetting world, it was common to specify typefaces using this "x on y" notation, and CSS inherits this concept. The slash character divides the font size and line height values, just as it does in the print version.

Syntax Requirements

However, it's important to note that this shorthand notation requires specifying both the font family and size. The example provided in your question, font: 100%/120%;, is invalid and will be ignored by browsers. To make it valid, you must add a font family, such as:

font: 100%/120% serif;

By understanding the meaning of the slash in the CSS font property, you can effectively control the size and line spacing of your text in web design.

The above is the detailed content of What Does the Slash Mean in CSS Font Shorthand?. For more information, please follow other related articles on the PHP Chinese website!