Home >Web Front-end >CSS Tutorial >What does the slash (/) mean in CSS font sizing?

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

DDD
DDDOriginal
2024-11-11 10:48:03623browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn