1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
---
title: Text styles
slug: conflicting/Learn/CSS/Styling_text/Fundamentals
translation_of: Learn/CSS/Styling_text/Fundamentals
translation_of_original: Web/Guide/CSS/Getting_started/Text_styles
original_slug: Web/Guide/CSS/Getting_started/Text_styles
---
<p>{{ CSSTutorialTOC() }}</p>
<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}<span class="seoSummary">This is the 7th section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> tutorial; it gives more examples of text styles. You modify your sample stylesheet to use different fonts.</span></p>
<h2 class="clearLeft" id="Information_Text_styles">Information: Text styles</h2>
<p>CSS имеет несколько свойств для стилизации текста.</p>
<p>There is a convenient shorthand property, {{ cssxref("font") }}, which you can use to specify several aspects at once—for example:</p>
<ul>
<li>Bold, italic, and small-caps (small capitals)</li>
<li>Size</li>
<li>Line height</li>
<li>Font typeface</li>
</ul>
<div class="tuto_example">
<div class="tuto_type">Example</div>
<pre class="brush:css">p {
font: italic 75%/125% "Comic Sans MS", cursive;
}
</pre>
<p>This rule sets various font properties, making all paragraphs italic.</p>
<p>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).</p>
<p>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.</p>
<p>The rule has the side-effect of turning off bold and small-caps (setting them to <code>normal</code>).</p>
</div>
<h3 id="Font_faces">Font faces</h3>
<p>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.</p>
<p>End the list with one of the built-in default typefaces: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>.</p>
<p>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.</p>
<p>To specify a typeface on its own, use the {{ cssxref("font-family") }} property.</p>
<h3 id="Font_sizes">Font sizes</h3>
<p>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.</p>
<p>You can use some built-in values for font sizes, like <code>small</code>, <code>medium</code> and <code>large</code>. You can also use values relative to the font size of the parent element like: <code>smaller</code>, <code>larger</code>, <code>150%</code> or <code>1.5em</code>. 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.</p>
<p>If necessary you can specify an actual size like: <code>14px</code> (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.</p>
<p>To specify a font size on its own, use the {{ cssxref("font-size") }} property.</p>
<h3 id="Line_height">Line height</h3>
<p>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.</p>
<p>To specify a line height on its own, use the {{ cssxref("line-height") }} property.</p>
<h3 id="Decoration">Decoration</h3>
<p>The separate {{ cssxref("text-decoration") }} property can specify other styles, like <code>underline</code> or <code>line-through</code>. You can set it to <code>none</code> to explicitly remove any decoration.</p>
<h3 id="Other_properties">Other properties</h3>
<p>To specify italic on its own, use {{ cssxref("font-style") }}<code>: italic;</code><br>
To specify bold on its own, use <code>{{ cssxref("font-weight") }}: bold;</code><br>
To specify small capitals on its own, use <code>{{ cssxref("font-variant") }}: small-caps;</code></p>
<p>To turn any of these off individually, you can specify the value <code>normal</code> or <code>inherit</code>.</p>
<div class="tuto_details">
<div class="tuto_type">More details</div>
<p>You can specify text styles in a variety of other ways.</p>
<p>For example, some of the properties mentioned here have other values that you can use.</p>
<p>In a complex stylesheet, avoid using the shorthand <code>font</code> property because of its side-effects (resetting other individual properties).</p>
<p>For full details of the properties that relate to fonts, see <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> in the CSS Specification. For full details of text decoration, see <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>.</p>
<p>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.</p>
</div>
<h2 id="Action_Specifying_fonts">Action: Specifying fonts</h2>
<p>For a simple document, you can set the font of the {{ HTMLElement("body") }} element and the rest of the document inherits the settings.</p>
<ol>
<li>Edit your CSS file.</li>
<li>Add the following rule to change the font throughout the document. The top of the CSS file is a logical place for it, but it has the same effect wherever you put it:
<pre class="eval">body {
font: 16px "Comic Sans MS", cursive;
}
</pre>
</li>
<li>Add a comment explaining the rule, and add white space to make it match your preferred layout.</li>
<li>Save the file and refresh your browser to see the effect. If your system has Comic Sans MS, or another cursive font that does not support italic, then your browser chooses a different font face for the italic text in the first line:
<table style="border: 2px outset #36b; padding: 1em;">
<tbody>
<tr>
<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
</tr>
<tr>
<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
</tr>
</tbody>
</table>
</li>
<li>From your browser's menu bar, choose <strong>View > Text Size > Increase</strong> (or <strong>View > Zoom > Zoom In</strong>). Even though you specified 16 pixels in the style, a user reading the document can change the size.</li>
</ol>
<div class="tuto_example">
<div class="tuto_type">Challenge</div>
<p>Without changing anything else, make all six initial letters twice the size in the browser's default serif font:</p>
<table>
<tbody>
<tr>
<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td>
</tr>
<tr>
<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td>
</tr>
</tbody>
</table>
<div class="tuto_details" id="tutochallenge">
<div class="tuto_type">Possible solution</div>
<p>Add the following style declaration to the <code>strong</code> rule:</p>
<pre class="brush: css"> font: 200% serif;
</pre>
If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden.
<p> </p>
<a class="hideAnswer" href="#challenge">Hide solution</a></div>
<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>
<h2 id="What_next">What next?</h2>
<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}Your sample document already uses several named colors. The <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Color">next section</a> lists the names of standard colors and explains how you can specify others<strong>.</strong></p>
|
