What Does the Forward Slash Mean in CSS Font Shorthand?

CSS Font Shorthand: Unraveling the Meaning of the Forward Slash

The CSS font shorthand property allows you to condense font attribute declarations into a single line. But what does the forward slash (/) separating two values signify?

Question:

In the following CSS:

font: 12px/18px ...

What do the values "12px" and "18px" represent?

Answer:

The forward slash serves as a visual indicator, separating two distinct font attributes:

• 12px: This is the font size, indicating the height of individual characters.
• 18px: This is the line height, which defines the vertical spacing between lines of text.

Explanation:

The syntax is derived from typographical notations used to specify font sizes and line heights. By combining them into a single shorthand declaration, the above line is equivalent to:

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

If the line height is set to a relative value (e.g., percentage or ems), it is calculated based on the font size.

Note that this syntax is exclusive to the font shorthand property and cannot be used with individual font attributes. Developers utilizing this shorthand will find it convenient, saving them the effort of specifying the attributes separately.

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