Skip to content

装饰文本

CSS 提供了很多强大的功能,用于装饰文本。
我们可以使用这些功能设置字体、颜色、字号和行距等属性,为标题、无序列表和包含文本的常规段落添加视觉效果。

使用字体

为了让网页看上去更吸引人,我们首先可以为标题、段落和其他元素指定不同的字体。在 CSS 样式中设定字体的方式是,使用 font-family 属性指定想用的字体。
比如说我们想让页面里的段落使用 Arial 字体,可以编写一个 p 标签样式,然后使用 font-famil 属性,如下所示:

1
2
3
p {
    font-family: Arial;
}

以前,只有访客的电脑中安装了 font-family 属性指定的字体,网站才会使用那个字体。也就是说,对上面的示例而言,如果网站访客的电脑里没有安装 Arial 字体,
页面中的段落就会使用 Web 浏览器的默认字体显示(通常是 Times New Roman 的某种变体)。因此,Web 设计师只能使用大多数电脑中预先安装的那几个字体。

最近,Web 浏览器开始支持 Web 字体了--访问网站时浏览器下载的字体。
Web 字体也使用 font-family 属性设置,不过除此之外还要使用一个 CSS 命令 -- @font-face 指令,这个指令的作用是告诉 Web 浏览器从哪儿下载字体。
有了 Web 字体,我们可以选择的字体更多了,设计的灵活度也高了。

为文本着色

修改字号

让网页中的文字使用不同的字号能实现有趣的视觉效果,引导访客把注意力转到重要的区域。
标题用大字号可以吸引视线,而版权声明不需要太突出,适合使用小字号。

文本字号使用 font-size 属性设定,后面还要指定度量单位,如下所示:

1
font-size: 1em;