What does the slash (/) mean in CSS font sizing?

CSS Font Sizing with Slash: Unraveling the Syntax

In CSS, the font property can accept a syntax that includes a slash, raising questions about its purpose. Let's delve into the meaning and usage of this notation.

Slash Delimiter in Font Sizing

The slash in font sizing syntax separates two values. It denotes the specification of two separate properties: font-size and line-height. The values to the left and right of the slash represent these properties, respectively.

For instance, the following CSS declaration:

font: 100%/120%;

is equivalent to:

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

Traditional Typographical Notation

This notation originates from the traditional typographical practice of specifying font dimensions in the format "x pt on y pt." Here, "x pt" represents the glyph height, and "y pt" denotes the vertical spacing between lines of text, known as leading.

By allowing the slash delimiter in CSS font property, it enables developers to specify both font size and line spacing in a single concise line.

Valid Usage

It's crucial to note that the font shorthand notation requires you to specify both font size and font family. Omitting either value will result in an invalid declaration. For example, the following is a valid usage:

font: 100%/120% serif;

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