What does the slash (/) do in CSS font size declarations?

Understanding CSS Font Size with Slashes

In CSS, we often encounter the slash (/) when defining font sizes. It may seem confusing, but it actually serves an important purpose.

Consider the following CSS declaration:

font: 100%/120%;

What does the slash do here?

The slash represents a separation between two properties:

• font-size: Sets the size of the text.
• line-height: Controls the vertical spacing between lines of text.

So, the above declaration is equivalent to:

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

Official Definition:

According to the CSS documentation, "The syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts."

Typographical History:

In traditional typography, it is common to specify typeface sizes as "x pt on y pt," indicating the glyph size and line height. This notation is reflected in the CSS font shorthand using the slash.

Browser Handling:

Note that you must specify both the font size and family when using the font shorthand notation. Using only font: 100%/120%; is incorrect and will be ignored by browsers. However, you can include a generic family name to make it valid:

font: 100%/120% serif;

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