CSS文本样式

字体设置

在CSS中可通过如下属性设置字体。

属性名 说明 CSS版本
font-size 设置字体的大小 1
font-variant 设置英文是否转为小型大写 1
font-style 设置字体是否倾斜 1
font-weight 设置字体是否加粗 1
font-family 设置字体名称 1
@font-face 设置Web字体 3
font 字体样式的组合写法 1,2

font-size

设置字体的大小。

说明
xx-small
x-small
small
medium
large
x-large
xx-large
smaller 相对于父元素字体更小
larger 相对于父元素字体更大
数字px 使用像素长度来设置字体大小
数字% 相对于父元素字体的百分比大小

font-variant

设置英文是否转为小型大写。

说明
normal 如果以小型大写状态的文本恢复到小写状态
small-caps 让小写字母文本以小型大写显示

font-style

设置字体是否倾斜。

说明
normal 让倾斜状态恢复到正常
italic 使用斜体
oblique 让文字倾斜

font-weight

设置字体是否加粗。

说明
normal 让加粗的字体恢复正常
bold 粗体
bolder 更粗
lighter 细体
100~900之间的数字 600之后是加粗,之前是不加粗

font-family

设置字体名称。注意这里使用的字体是用户端字体,若用户端缺失这些字体,则需要使用@font-face来配置服务端字体。

支持传入多个值,优先的字体排前面。

p {
    font-family: 宋体,微软雅黑;
}
1
2
3

@font-face

配置服务端字体。

@font-face {
    font-family: abc;
    src: url('xxx.otf') // 相对于当前css文件的路径
}

p {
    font-family: abc;
}
1
2
3
4
5
6
7
8

font

字体设置的组合写法。格式如下:[是否倾斜|是否加粗|是否转小型大写] 字体大小 字体名称。

p {
    font: 50px 宋体;
}
1
2
3

文本

在CSS中可通过如下属性来设置文本。

属性名 说明 CSS版本
text-decoration 用各种划线装饰文本 1
text-transform 转换英文文本的大小写 1
text-shadow 给文本添加阴影 3
text-align 设置文本的对齐方式 1,3
white-space 设置空白排版的处理方式 1
letter-spacing 设置字母之间的间距 1
word-spacing 设置单词之间的间距 1
line-weight 设置行高 1
word-wrap 是否断词 3
text-indent 设置文本首行的缩进 1

text-decoration

用各种划线装饰文本,可选属性值如下:

说明
none 取消掉本身有划线的装饰
underline 让文本的底部出现下划线
overline 让文本的头部出现上划线
line-through 让文本的中部出现删除线
blink 让文本进行闪烁,基本不支持

text-transform

转换英文文本的大小写。

说明
none 恢复到默认状态
capitalize 英文单词的首字母大写
uppercase 英文转为大写
lowercase 英文转为小写

text-shadow

给文本添加阴影。有4个数值,分别为:水平偏移、垂直偏移、阴影模糊度(可选)、阴影颜色(可选,默认为文本颜色)。

p {
    text-shadow: 5px 5px 3px black;
}
1
2
3

text-align

设置文本的对齐方式。

说明
left 左对齐,默认
right 右对齐
center 居中对齐
justify 内容两端对齐
start 让文本处于开始的边界,CSS3新增
end 让文本处于结束的边界,CSS3新增

white-space

设置空白排版的处理方式。

说明
normal 空白符被压缩,文本自动换行。默认
nowrap 空白符被压缩,文本不换行
pre 空白符被保留,遇到换行符才换行
pre-line 空白符被压缩,文本会在排满或遇换行符时换行
pre-wrap 空白符被保留,文本会在排满或遇换行符时换行

letter-spacing

设置字母之间的间距。

说明
normal 默认间距
长度值 数字px

word-spacing

设置单词之间的间距。

说明
normal 默认间距
长度值 数字px

line-weight

设置段落行高。

说明
normal 默认间距
长度值 数字px
数值 倍数
% 如200%表示两倍

word-wrap

让过长的英文单词断开。

说明
normal 不断开单词
break-word 断开单词

text-indent

设置文本首行的缩进。

说明
normal 默认间距
长度值 数字px