CSS 文本属性

前端

CSS

作者

yangjh

发布日期

October 30, 2021

使用 CSS 可以修改文本的字体、大小、粗细、倾斜、行间距、缩进方式、颜色等等，页面大部分内容都是以文字的形式出现，因此，文本的相关样式表的属性和值需要熟练掌握。

设定字体

通常情况下，中文页面的字体为宋体字，但新闻标题的字体会指定为更加醒目的黑体字或其他字体。在 CSS 中通过 font-family 属性来实现字体的指定，其中字体名称应该用单引号或者双引号包围起来。如：

h1 {
    font-family: "黑体";
}

虽然在语法上我们可以指定任何字体，但是在用户浏览时，只会看到他们的系统中已经安装的字体，没有安装的字体或者无法从网络获取的字体，会被系统默认的字体代替，在中文系统中，默认的字体为宋体字，常见的字体还有黑体、楷体、仿宋。有时为了兼顾各种设备，我们需要为文字指定不止一种字体，这些字体在不同的设备中名称可能不同。如下：

body {
    font-family: "宋体","sans-serif";
}

在上面的例子中，浏览器会首先使用宋体来显示文本，当系统中没有安装宋体字时，才会使用替代字体 sans-serif。替代字体可以有多个，分别用逗号隔开。

斜体

斜体常常用来表示引述、人名、外语单词等内容的表示。斜体效果使用 font-style 属性来控制，font-style 有 3 个值：italic、oblique、normal，分别表示使用字体的倾斜版本来显示字体、使用计算机动态倾斜文字以及按正常字体显示。如：

em {
    font-style: italic;
}

粗体

在页面中，加粗的显示效果比较常见，是常规的、有效的强调内容的手段。

使用样式表的 font-weight 属性可以灵活地控制字体的粗细，如：

em {
    font-weight: bold;
}

font-weight 的只有两种表示方法，一种是从 100-900 之间的 100 的倍数；一种是 lighter、normal、bold 以及 bolder。

设置字体大小

在 CSS 中，使用 font-size 属性为字体指定大小，例如：

p {
    font-size: 10px;
}
body {
    font-size: 62.5%;
}

通常情况下，浏览器的默认字体大小为 16px，而 16px 的 62.5%恰好也为 10px。

设置行间距

为了增强文字的易读性，我们通常要调整段落中的文字行间距，使用比较大的行间距能够提高文字的可识别性。对于一些不重要的信息，我们可以缩小行间距，使之显得更加紧凑。在 CSS 中，使用 line-height 属性来控制行间距的大小，它的值除了可以采用相对单位、绝对单位和百分比之外，还可以是没有单位的数字。例如：

p {
    font-size：16px；
    line-height: 1.75;
}

上例中段落中文字的行间距最终等于 28（16*1.75）像素。

同时设置所有字体值

除了能够使用 font-family、font-size、line-height、font-weight 分别设置字体字型、字体大小、行间距和粗细外，CSS 还提供了 font 属性用以快速设置字体属性。font 属性的设定非常灵活，可以是上述几种属性的自由组合，但字体大小的属性值出现在设置字体系列的前面，如果有行间距的话，行间距必须直接出现在字体大小后面，用斜杠连接。如：

p {
    font: bold 16px/1.75 “宋体”;
}

上述规则设定段落元素的字体加粗、字体大小为 16 像素，行间距为 28（16*1.75）像素，采用宋体字型。再如：

p {
    font: 16px “宋体” ;
}

上述规格规定段落元素采用宋体字型、字体大小为 16px，其他属性为 normal。

设置字体颜色

在 CSS 中，可通过 color 属性为元素指定字体颜色。如：

p {
    color: black;
}

控制字符间距

通常情况下，中文字符的字间距不用做额外的调整，但有时由于版面空间有限，需要将较长的标题安排在某个固定的空间内，在不删除字数的情况下，我们可以利用 CSS 提供的 letter-spacing 属性来增加或缩小中文字符之间的间距。letter-spacing 的值是带单位的数字。如：

h2 {
letter-spacing: -2px;
}

上述规则将使二级标题中字符之间的距离在原有基础上缩小 2 个像素。

和 letter-spacing 相关联的另外一个属性是 word-spacing，word-spacing 用来调整单词之间的距离，由于汉字中的单个汉字被认定为字母，因此 word-spacing 在中文网页中的应用非常少。

首行缩进

CSS 使用 text-indent 属性来控制文本的首行缩进。text-indent 的值必须是有单位的数值，如 2em 或 18px 等。如果数值为正，则是首行缩进，如果数值为负，则是悬挂缩进。大多数情况下，新闻的正文内容中的段落都要求首行缩进两个字符，则可以这样设置规则：

p {
    text-indent: 2em;
}

文本对齐

CSS 中使用 text-align 来控制文本的对齐方式。text-align 的取值可以是 left、right、center、justify，分别对应左对齐、右对齐、居中以及两端对齐。如：

p {
    text-align: left;
}

表示左对齐段落中的文字。

文本装饰

CSS 还提供了对文本进行简单装饰的属性 text-decoration。该属性的只有 5 个：underline、overline、line-through、blink、none，分别表示下划线、上划线、删除线、闪烁以及取消装饰效果。例如：

a:hover {
    text-decoration: underline;
}

上述样式的效果是当鼠标滑过或停留在超级链接上时，超级链接中的文字出现下划线。

文字阴影

除了以上装饰效果外，CSS3 还可以通过 text-shadow 属性为文字添加阴影。在以前，阴影效果一般都是通过图片实现，现在直接使用 text-shadow 属性来实现阴影。这个属性可以有两个作用，产生阴影和模糊主体。这样在不需要图片的情况下就能给文字增加质感。语法如下：

text-shadow:[Color X-Offset Y-Offset Blur],[Color X-Offset Y-Offset Blur]...
或者
text-shadow:[X-Offset Y-Offset Blur Color],[X-Offset Y-Offset Blur Color]...

X-Offset 表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；Y-Offset 是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移；Blur 是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将 Blur 值设置为 0；Color 是指阴影的颜色，其可以使用 rgba 色。例如：

.demo1 {
   text-shadow: red 0 1px 0;
}

text-shadow 可以给一个对象应用一组或多组阴影效果，方式如前面的语法显示一样，用逗号隔开。例如：

.demo3 {
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
}

其他文本样式

文本除了上述属性外，还有些中文环境下不大常用的属性，如 white-sapce、text-transform、word-spacing、font-variant。感兴趣的读者可自行查找参考资料学习。

回到顶部