除了上一节我们讲到的背景以外,字体也是一个我们最常用到的属性,接下来我们就来讲一讲CSS字体。
CSS字体(font)属性定义文本中的字体,我们将从以下几个方面进行介绍。
属性 | 描述 |
---|---|
font | 简写属性。在一个声明中设置所有字体属性 |
font-family | 字体系列 |
font-size | 字体尺寸 |
font-size/line-height | 字体尺寸和行高 |
font-style | 字体风格 |
font-weight | 字体粗细 |
可以使用font-family属性定义文档采用的优先字体系列。
1. 通用字体系列
CSS定义了5种通用字体系列:
body{font-family:微软雅黑;} |
---|
body{font-family:微软雅黑,sans-serif;} |
---|
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