Typography in CSS

在 CSS 中可define the color, size, spacing, and shape of text

#color

Defines the color of the text.

color: transparent;

Applies a transparent color to the text. The text will still take up the space it should.

color: red;

You can use one of the 140+ color names.

color: #05ffb0;

You can use hexadecimal color codes.

color: rgb(50, 115, 220);

You can use rgb() color codes:

  • the first value is for red
  • the second value is for green
  • the third value is for blue

Each of them can have a value between 0 and 255.

color: rgba(0, 0, 0, 0.5);

You can use rgba() color codes:

  • the first 3 values are for rgb
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

color: hsl(14, 100%, 53%);

You can use hsl() color codes:

  • the first value is for hue and can go from 0 to 359
  • the second value is for saturation and go from 0% to 100%
  • the third value is for luminosity and go from 0% to 100%

color: hsla(14, 100%, 53%, 0.6);

You can use hsl()a color codes:

  • the first 3 values are for hsl
  • the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

#font-family

font-family: "Source Sans Pro", "Arial", sans-serif;

When using multiple values, the font-family list of font families defines the priority in which the browser should choose the font family.

The browser will look for each family on the user's computer and in any @font-face resource.

The list is prioritized from left to right: it will use the first value if it's available, or go to the next one, until the end of the list is reached. The default font family is defined by the browser preferences.

In this example, the browser will try to use Source Sans Pro if it's available. If it can't find it, it will try to use Arial. If it's not available either, it will use the browser's sans-serif font.

font-family: serif;

The browser will use a serif font family: all characters have stroke endings.

font-family: sans-serif;

The browser will use a sans-serif font family: no character has stroke endings.

font-family: monospace;

The browser will use a monospace font family: all characters have the same width.

font-family: cursive;

The browser will use a cursive font family.

font-family: fantasy;

The browser will use a fantasy font family.

#font-size

Defines the size of the text.

默认属性 font-size: medium;

The text will use the browser's default medium size.

font-size: 20px;

You can use pixel values.

font-size: 1.2em;

You can use em values.

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.

font-size: 1.2rem;

You can use rem values.

The value is relative to the root element's font-size, which is the <html> element.
As a result, the value will not vary depending on the depth of the element in the HTML hierarchy, and will reamin context independent.

font-size: 90%;

You can use percentage values. They act like em values.

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.

font-size: smaller;

You can use relative keywords. The value is relative to the parent.

The following are available:

  • larger
  • smaller

font-size: x-large;

You can use absolute keywords. The value is relative to the root element <html>.

The following are available:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

#font-style

Defines how much the text is slanted.

默认属性 font-style: normal;

The text is not slanted.

font-style: italic;

Use the italic version of the font: the letters are slightly slanted.

font-style: oblique;

Use the oblique version of the font: the letters are more slanted than italic.

#font-variant

Defines which glyph to use for each letter.

默认属性 font-variant: normal;

Each letter uses its normal glyph.

font-variant: small-caps;

Each letter uses its small capitalized version.

#font-weight

Defines the weight of the text.

默认属性 font-weight: normal;

The text is in normal weight.

font-weight: bold;

The text becomes bold.

font-weight: 600;

You can use numeric values. They all correspond to a particular named weight:

  • 100 Thin
  • 200 Extra Light
  • 300 Light
  • 400 Normal
  • 500 Medium
  • 600 Semi Bold
  • 700 Bold
  • 800 Extra Bold
  • 900 Ultra Bold

If the font family doesn't provide the requested weight, it will use the closest available one.

font-weight: lighter;

You can use relative keywords: lighter or bolder. The browser will use the next available weight.

#font

Shorthand property for font-style font-variant font-weight font-size line-height and font-family.

#letter-spacing

Defines the spacing between the characters of a block of text.

默认属性 letter-spacing: normal;

The spacing between the characters is normal.

letter-spacing: 2px;

You can use pixel values.

letter-spacing: 0.1em;

You can use em values: this allows the spacing to remain relative to the font-size.

#line-height

Defines the height of a single line of text.

默认属性 line-height: normal;

Reverts to the default value of the browser.

recommended line-height: 1.6;

You can use unitless values: the line height will be relative to the font size.

line-height: 30px;

You can use pixel values.

line-height: 0.8em;

You can use em values: like with unitless values, the line height will be relative to the font size.

#text-align

Defines how the text content of the element is horizontally aligned.

text-align: left;

The text content is aligned to the left.

text-align: right;

The text content is aligned to the right.

text-align: center;

The text content is centered.

text-align: justify;

The text content is justified.

#text-decoration

Defines how the text content of the element is decorated.

默认属性 text-decoration: none;

Removes any text decoration.

text-decoration: underline;

Underlines the text content.

#text-indent

Defines the indentation of the element's first line of text.

默认属性 text-indent: 0;

The text is not indented.

text-indent: 40px;

You can use numeric values like pixels, (r)em, percentages...

Notice how only the first line is indented.

text-indent: -2em;

You can also use negative values.

#text-overflow

Defines how the hidden text content behaves if it's overflowing.

默认属性 text-overflow: clip;

The text content is clipped and not accessible.

text-overflow: ellipsis;

The overflowing content is replaced by an ellipsis: …

#text-shadow

Defines the shadow of the text content.

默认属性 text-shadow: none;

The text content has no shadow.

text-shadow: 2px 6px;

You need at least two values:

  • the first is the horizontal offset
  • the second is the vertical offset

The shadow color will be inherited from the text color.

text-shadow: 2px 6px red;

You can define a color as the last value.

As with color, you can use color names, hexadecimal, rgb, hsl...

text-shadow: 2px 4px 10px red;

The optional third value defines the blur of the shadow.

The color will be diffused across 10px in this example, from opaque to transparent.

#text-transform

Defines how the text content should be transformed.

默认属性 text-transform: none;

Removes any text transformation: the text will appear the same as in the HTML code.

text-transform: capitalize;

Turns the first letter of each word into a capital letter.

text-transform: uppercase;

Turns all letters into capital letters.

text-transform: lowercase;

Turns all letters into lowercase letters.

#white-space

Defines how the element's white space is handled.

默认属性 white-space: normal;

Sequences of spaces are combined into one.
Line breaks are ignored.
The text content is wrapped.

white-space: nowrap;

Sequences of spaces are combined into one.
Line breaks are ignored.
The text content is not wrapped and remains on a single line.

white-space: pre;

The white space is exactly preserved.

  • Sequences of spaces are preserved
  • Lines break only on new lines and <br>

white-space: pre-wrap;

The white space is mostly preserved.

  • Sequences of spaces are preserved
  • Lines break on new lines, <br>, but also when reaching the end of the element

white-space: pre-line;

Only new lines are preserved.

  • Sequences of spaces are combined into one
  • Lines break on new lines, <br>, but also when reaching the end of the element

#word-break

Defines how words should break when reaching the end of a line.

默认属性 word-break: normal;

Words with no space will not break. Sequences of uninterrupted characters will be displayed on a single line.

word-break: break-all;

Words with no space will break as soon as they reach the end of a line.

#word-spacing

Defines the spacing between words of a block of text.

默认属性 word-spacing: normal;

The spacing between the characters is normal.

word-spacing: 5px;

You can use pixel values.

word-spacing: 2em;

You can use em values: this allows the spacing to remain relative to the font-size.