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
154
155
156
157
158
|
---
title: 文本样式
slug: Web/Guide/CSS/Getting_started/Text_styles
translation_of: Learn/CSS/Styling_text/Fundamentals
translation_of_original: Web/Guide/CSS/Getting_started/Text_styles
---
<p>{{ CSSTutorialTOC() }}</p>
<p>{{previousPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "创建可读性良好的CSS")}} 这是<a href="/en-US/docs/Web/Guide/CSS/Getting_Started">CSS入门教程</a>系列教程的第7部分；本节讲述了更多的有关文本的样式。你可以通过更改示例样式来使用不同的字体。</p>
<h2 class="clearLeft" id="资料：文本样式">资料：文本样式</h2>
<p>CSS提供了几个属性用来操作字体。</p>
<p>我们先来看一个简写属性 {{ cssxref("font") }}，使用这个属性可以很方便的指定其他的字体属性。比如：</p>
<ul>
<li>字体加粗，字体的风格：斜体和字体变形：小型大写字母</li>
<li>字体的大小</li>
<li>行高</li>
<li>字体</li>
</ul>
<div class="tuto_example">
<div class="tuto_type">示例</div>
<pre class="brush:css">p {font: italic 75%/125% "Comic Sans MS", cursive;}
</pre>
<p>这条规则定义了字体的几个属性，使整个段落文本都变成斜体。</p>
<p>字体大小设置为每个段落父元素字体大小的3/4，行高设置为125%（比常规的间隔稍大一些）。</p>
<p>文本字体设置为 Comic Sans MS，假如该字体不被浏览器支持则使用默认字体：cursive。</p>
<p><span style="line-height: 1.5;">这条规则还把bold和small-caps这些效果给去掉了（设置它们的值为normal）。</span></p>
</div>
<h3 id="sect1"> </h3>
<h3 id="字体">字体</h3>
<p>你无法预料到用户是否可以访问样式表里定义的字体。所以在设置字体时，在属性后指定一个替代的字体列表是个不错的主意。</p>
<p>在这个字体列表的最后加上系统字体中的一个，如：serif,sans-serif,cursive,fantasy或monospace。</p>
<p>如果字体不支持样式表里设置的字体特征，浏览器会使用另一种字体。比如，样式表中包含字体不支持的特殊字符，如果浏览器发现另一种字体支持这些特殊字符，那浏览器就会选择使用这种字体。</p>
<p>使用 {{ cssxref("font-family") }} 属性指定文本的字体。</p>
<p>简体中文的字体示例：</p>
<p>Windows：font-family:微软雅黑;</p>
<p>Mac OS：font-family:"Songti SC";</p>
<h3 id="字号">字号</h3>
<p>浏览器用户浏览页面时，可以覆盖页面默认的文号大小，也可以改变页面的字号大小。所以说尽可能的使用相对的字号大小对你来说是有意义的。</p>
<p>你可使用系统内置的值来设置字号，比如small,medium和large。你也可以使用相对父元素字号大小的值来设置，比如：smaller,larger,150%或1.5em。1“em”等于1个字母“m”的宽度（相对于父元素字号大小）;因此1.5em就是1.5倍的父元素字号大小。</p>
<p>如果有必要你也可以指定一个实际的大小，比如14px(14像素)应用于显示设备或14pt(14点)应用于打印设备。但是实际大小不能应用于视力受损用户的设备上，因为这些设备不支持指定实际的值。一个比较容易实现的策略是给顶级的文档元素指定一个系统内置的值如medium，然后再给它的子元素设置个相对值。</p>
<p>使用{{ cssxref("font-size") }} 属性指定字体的大小。</p>
<h3 id="行高">行高</h3>
<p>行高用来指定行与行之间的距离。如果你的文档中有一个很长的段落由很多行组成，而且这个段落的字号还比较小，这时给它指定一个稍大的间距，这样阅读起来会更方便。</p>
<p>使用 {{ cssxref("line-height") }} 属性指定文本的行间距。</p>
<h3 id="装饰">装饰</h3>
<p>单独的 {{ cssxref("text-decoration") }}就可以为文本指定其他风格，比如underline或line-through。你也可以把值设置成none，把这些风格取消掉。</p>
<h3 id="其他属性">其他属性</h3>
<p>使用<span style="line-height: 1.5;">{{ cssxref("font-style") }}</span><code style="font-size: 14px;">: italic;指定文本为斜体</code><code style="font-size: 14px;">;</code></p>
<p><code style="font-size: 14px;">使用</code><span style="line-height: 1.5;"> </span><code style="font-size: 14px;">{{ cssxref("font-weight") }}: bold;指定文本加粗;</code></p>
<p>使用<span style="line-height: 1.5;"> </span><code style="font-size: 14px;">{{ cssxref("font-variant") }}: small-caps;指定文本为小型大写字母;</code></p>
<p>如果我们想单独设置某个效果失效，我们可以把其相应的属性设置为normal或inherit.</p>
<div class="tuto_details">
<div class="tuto_type">详细资料</div>
<p>我们也可以采用其他方式指定文本样式。</p>
<p><span style="line-height: 1.5;">比如，这里提到的几个属性的其他值。</span></p>
<p>在一个复杂的样式表中，应该避免使用font属性，因为它的副作用（重置其他个体属性）。</p>
<p>字体相关的全部细节，可以在CSS规范里查看<a class="external" href="http://www.w3.org/TR/CSS21/fonts.html" style="line-height: 1.5;">Fonts</a><span style="line-height: 1.5;"> 。文本修饰相关可以查看</span><span style="line-height: 1.5;"> </span><a class="external" href="http://www.w3.org/TR/CSS21/text.html" style="line-height: 1.5;">Text</a><span style="line-height: 1.5;"> 。</span></p>
<p>如果我们不想使用系统上的默认字体库，我们可以使用{ { cssxref(@font-face)} }指定一个在线字体。然而，这要求用户的浏览器支持该字体。</p>
</div>
<h2 id="实践：指定字体">实践：指定字体</h2>
<p>对于一个简单的页面，我们可以设置 {{ HTMLElement("body") }}元素的字体，然后页面中的其他元素继承这个设置。</p>
<ol>
<li>编辑我们的样式表。</li>
<li>添加以下规则到你的样式表中。推荐这个规则放在css文件的开头:
<pre class="eval">body {font: 16px "Comic Sans MS", cursive;}
</pre>
</li>
<li>添加一个该规则的注释，可以添加空格匹配你的整体样式布局。</li>
<li>保存文件并刷新浏览器查看效果。如果你的系统有Comic Sans MS或cursive字体，这两种字体都不支持斜体。你的浏览器会自动选择另一种字体实现斜体，效果如第一行。
<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>从浏览器的菜单栏中选择 视图 > 字体大小 > 放大（或视图 > 缩放 > 放大）。即使你在样式里指定了字体为16px。用户浏览网页时，还是可以改变字体字号的大小。</li>
</ol>
<div class="tuto_example">
<div class="tuto_type">挑战</div>
<p>不改变什么，让6个初始字母的字号大小调整为2倍于浏览默认的衬线字体:</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">查看答案.</a></div>
<h2 id="下一节">下一节?</h2>
<p>{{nextPage("/zh-CN/docs/Web/Guide/CSS/Getting_Started/Color", "颜色")}}示例文档已经使用几个颜色命名。下一节列表中将列出标准的颜色名称，并且介绍其他的定义颜色的方式。</p>
|
