网页|CSS字体介绍
除了上一节我们讲到的背景以外，字体也是一个我们最常用到的属性，接下来我们就来讲一讲CSS字体。
CSS字体(font)属性定义文本中的字体，我们将从以下几个方面进行介绍。
属性 | 描述 |
|---|---|
font | 简写属性。在一个声明中设置所有字体属性 |
font-family | 字体系列 |
font-size | 字体尺寸 |
font-size/line-height | 字体尺寸和行高 |
font-style | 字体风格 |
font-weight | 字体粗细 |
可以使用font-family属性定义文档采用的优先字体系列。
1. 通用字体系列
CSS定义了5种通用字体系列：
- a) Serif字体系列的字体成比例，而且有上下短线。成比例是指字体中的所有字符根据其不同大小有不同的宽度。例如，小写i和小写m的宽度就不同。上下短线是每个字符笔划末端的装饰，比如大写A两条腿底部的短线。Serif字体系列包括Times、Georgia和NewCentury Schoolbook。
- b) Sans-serif字体系列的字体是成比例的，没有上下短线。包括Helvetica、Geneva、Verdana、Arial或Univers。
- c) Monospace字体系列的字体并不是成比例的，通常用于打印机输出。这些字体每个字符的宽度都必须完全相同，所以小写的i和小写的m有相同的宽度。包括Courier、Courier New和Andale Mono。
- d) Cursive字体系列的字体模仿人的手写体，包括ZapfChancery、Author和Comic Sans。
- e) Fantasy字体系列的字体无法用任何特征来定义，包括Western、Woodblock和Klingon。
- 2. 指定字体系列
- a) 除了通用字体系列，还可以设置更具体的字体。如文档所有元素使用“微软雅黑”字体：
body{font-family:微软雅黑;} |
|---|
- b) 指定字体会产生一个问题，如果用户没有安装这种字体，就只能使用默认字体来显示。可以通过指定字体和通用字体系列相结合来解决这个问题，如：
body{font-family:微软雅黑,sans-serif;} |
|---|
- c) 如果用户没有安装“微软雅黑”，但安装了Times字体（serif系列），元素会使用Times。
p{ background-color: gray;} |
|---|
3. 字体大小
font-size属性设置元素的字体大小，实际上它设置的是字体中字符框的高度，实际的字符字形可能比这些框高或矮（通常矮）
值 | 描述 |
|---|---|
xx-small、x-small、smallmedium、large、x-large、xx-large | 把字体的尺寸设置为从xx-small到xx-large默认值：medium |
smaller | 设置为比父元素更小的尺寸 |
larger | 为比父元素更大的尺寸 |
length | 设置为一个固定的值 |
% | 设置为基于父元素的一个百分比值 |
4.字体风格
font-style属性定义字体的风格。
值 | 描述 |
|---|---|
normal | 默认值。标准字体样式 |
Italic | 斜体 |
oblique | 倾斜 |
如为段落设置不同的字体风格：
p.italic{font-style:italic;}p.oblique{font-style:oblique;} |
|---|
5.字体粗细
值 | 描述 |
|---|---|
normal | 默认值。标准字符 |
bold | 粗体 |
bolder | 更粗 |
lighter | 更细 |
100、200、300、400、500、600、700、800、900 | 定义由粗到细的字符。400=normal，700= bold |
6. CSS3服务器端字体
在CSS3之前，Web设计师必须使用已在用户计算机上安装好的字体。现在通过CSS3 @font-face，Web设计师可以使用他们喜欢的任意字体，并将该字体文件存放到Web服务器上，用户在访问页面时，字体会在需要时被自动下载到用户的计算机上。@font-face规则中定义的描述符。
描述符 | 值 | 描述 |
|---|---|---|
font-family | name | 必需。规定字体的名称 |
src | URL | 必需。定义字体文件的URL |
font-stretch | normal、condensed、ultra-condensed、extra-condensed、semi-condensed、expanded、semi-expanded、extra-expanded、ultra-expanded | 可选。定义如何拉伸字体。默认是"normal" |
font-style | ormal、italic、oblique | 可选。定义字体的样式。默认是"normal" |
font-weight | normal、bold、100、200、300、400、500、600、700、800、900 | 可选。定义字体的粗细。默认是"normal" |
unicode-range | unicode-range | 可选。定义支持的UNICODE字符范围。默认是 "U+0-10FFFF" |
如果使用服务器端字体，必须首先在@font-face规则中定义字体的名称和位置，然后在HTML元素中通过font-family来引用服务器端字体。
END