{{ CSSTutorialTOC() }}
{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}This is the 7th section of the CSS Getting Started tutorial; it gives more examples of text styles. You modify your sample stylesheet to use different fonts.
CSS имеет несколько свойств для стилизации текста.
There is a convenient shorthand property, {{ cssxref("font") }}, which you can use to specify several aspects at once—for example:
p {
font: italic 75%/125% "Comic Sans MS", cursive;
}
This rule sets various font properties, making all paragraphs italic.
The font size is set to three-quarters of the size in each paragraph's parent element, and the line height is set to 125% (a little more spaced than normal).
The font typeface is set to Comic Sans MS, but if this typeface is not available then the browser will use its default cursive (hand-written) typeface.
The rule has the side-effect of turning off bold and small-caps (setting them to normal).
You cannot predict what typefaces the readers of your document will have. When you specify font typefaces, it is a good idea to give a list of alternatives in order of preference.
End the list with one of the built-in default typefaces: serif, sans-serif, cursive, fantasy or monospace.
If the typeface does not support some features in the document, then the browser can substitute a different typeface. For example, the document might contain special characters that the typeface does not support. If the browser can find another typeface that has those characters, then it will use the other typeface.
To specify a typeface on its own, use the {{ cssxref("font-family") }} property.
Browser users can override the default font sizes or change the text size while they read a page, so it makes good sense for you to use relative sizes wherever you can.
You can use some built-in values for font sizes, like small, medium and large. You can also use values relative to the font size of the parent element like: smaller, larger, 150% or 1.5em. An "em" is equivalent to the width of the letter "m" (for the font size of the parent element); thus 1.5em is one-and-a-half times the size of the font of the parent element.
If necessary you can specify an actual size like: 14px (14 pixels) for a display device or 14pt (14 points) for a printer. This is not accessible for visually impaired users because it does not allow them to change the size. A more accessible strategy is to set a built-in value like medium on a top-level element of the document, and then set relative sizes for all its descendent elements.
To specify a font size on its own, use the {{ cssxref("font-size") }} property.
The line height specifies the spacing between lines. If your document has long paragraphs with many lines, a larger-than-normal spacing makes it easier to read, especially if the font size is small.
To specify a line height on its own, use the {{ cssxref("line-height") }} property.
The separate {{ cssxref("text-decoration") }} property can specify other styles, like underline or line-through. You can set it to none to explicitly remove any decoration.
To specify italic on its own, use {{ cssxref("font-style") }}: italic;
To specify bold on its own, use {{ cssxref("font-weight") }}: bold;
To specify small capitals on its own, use {{ cssxref("font-variant") }}: small-caps;
To turn any of these off individually, you can specify the value normal or inherit.
You can specify text styles in a variety of other ways.
For example, some of the properties mentioned here have other values that you can use.
In a complex stylesheet, avoid using the shorthand font property because of its side-effects (resetting other individual properties).
For full details of the properties that relate to fonts, see Fonts in the CSS Specification. For full details of text decoration, see Text.
If you don't want to depend on the typefaces installed on users' systems, you can use {{ cssxref("@font-face") }} to specify an online font. However, this requires that the users have a browser that supports this rule.
For a simple document, you can set the font of the {{ HTMLElement("body") }} element and the rest of the document inherits the settings.
body {
font: 16px "Comic Sans MS", cursive;
}
| Cascading Style Sheets |
| Cascading Style Sheets |
Without changing anything else, make all six initial letters twice the size in the browser's default serif font:
| Cascading Style Sheets |
| Cascading Style Sheets |
Add the following style declaration to the strong rule:
font: 200% serif;If you use separate declarations for
font-size and font-family, then the font-style setting on the first paragraph is not overridden.
Hide solution
{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}Your sample document already uses several named colors. The next section lists the names of standard colors and explains how you can specify others.