What is the meaning of the slash (/) in CSS font declarations?

Understanding the Slash in CSS Font Sizing

The slash (/) in CSS font declarations, as in the example below, has a specific meaning:

font: 100%/120%;

Unlike regular font declarations, this syntax sets multiple font-related properties simultaneously:

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

According to the CSS documentation, this shorthand notation is based on traditional typographical conventions. Typographers often use the format "x pt on y pt" to denote the glyph (character) size and line height.

In the example, "100%" refers to the font size, while "120%" refers to the line height. The line height determines the vertical spacing between lines of text. A line height of 120% means that the vertical spacing will be 120% of the font size.

Note that the font shorthand notation requires specifying at least the font size and family. Therefore, the following declaration is invalid:

font: 100%/120%;

To make it valid, a generic font family name can be added:

font: 100%/120% serif;

The above is the detailed content of What is the meaning of the slash (/) in CSS font declarations?. For more information, please follow other related articles on the PHP Chinese website!