第七十二节，文本样式
文本样式
学习要点：
1.字体总汇
2.字体设置
3.Web字体
本章主要探讨HTML5中CSS文本样式，通过文本样式的设置，更改字体的大小、样式以及文本的方位。
一．字体总汇
本节课，我们重点了解一下CSS文本样式中字体的一些设置方法，样式表如下：
属性名 说明 CSS版本
font-size 设置字体的大小 1
font-variant 设置英文字体是否转换为小型大写 1
font-style 设置字体是否倾斜 1
font-weight 设置字体是否加粗 1
font-family 设置font字体 1
font 设置字体样式复合写法 1 ~ 2
@font-face 设置Web字体 3
二．字体设置
我们可以通过CSS文本样式来修改字体的大小、样式以及形态。
font-size 设置字体大小
值 说明
xx-small 设置字体大小。每个值从小到大的固定值
x-small
small
medium
large
x-large
xx-large 设置字体相对于父元素字体的大小
smaller
larger
数字+px 使用CSS像素长度设置字体大小
数字+% 使用相对于父元素字体的百分比大小
设置字体大小。每个值从小到大的固定值
/*从小到大的固定值*/ .a{ font-size: xx-small; } .b{ font-size: x-small; } .c{ font-size: small; } .d{ font-size: medium; } .e{ font-size: large; } .f{ font-size: x-large; } <p class="a">这是一段文本</p> <p class="b">这是一段文本</p> <p class="c">这是一段文本</p> <p class="d">这是一段文本</p> <p class="e">这是一段文本</p> <p class="f">这是一段文本</p>
设置字体相对于父元素字体的大小
/*设置字体相对于父元素字体的大小*/ .a{ font-size:xx-large; } .b{ font-size:smaller; } .c{ font-size:larger; } <p class="a">这是一段文本</p> <p class="b">这是一段文本</p> <p class="c">这是一段文本</p>
使用CSS像素长度设置字体大小
/*使用CSS像素长度设置字体大小*/ p { font-size: 50px; } <p>这是一段文本</p> <p>这是一段文本</p> <p>这是一段文本</p>
使用相对于父元素字体的百分比大小【推荐】
/*使用相对于父元素字体的百分比大小*/ p { font-size:200%; } <p>这是一段文本</p> <p>这是一段文本</p> <p>这是一段文本</p>
font-variant 设置英文字体是否转换为小型大写字母显示
值 说明
normal 表示如果以小型大写状态，让它恢复小写状态。
small-caps 让小写字母以小型大写字母显示。
p { font-variant: small-caps; } <p>这是一段文本html</p>
font-style设置字体是否倾斜。
值 说明
normal 表示让倾斜状态恢复到正常状态。
italic 表示使用斜体。
oblique 表示让文字倾斜。区别在没有斜体时使用。
.a { font-style: italic; } .b{ font-style: oblique; } <p class="a">这是一段文本html</p> <p class="b">这是一段文本</p>
font-weight 设置字体是否加粗。
值 说明
normal 表示让加粗的字体恢复正常。
bold 粗体
bolder 更粗的字体
lighter 轻细的字体
100 ~ 900之间的数字 600及之后是加粗，之前不加粗
在目前计算机和浏览器显示中，只有bold加粗，其他更粗更细，目前体现不出来。
.a { font-weight: bold; } .b{ font-weight: bolder; } .c{ font-weight: lighter; } .d{ font-weight: 700; } <p class="a">这是一段文本html</p> <p class="b">这是一段文本</p> <p class="c">这是一段文本</p> <p class="d">这是一段文本</p>
font-family使用指定字体名称。这里使用的字体是浏览者系统的字体。有时为了兼容很多浏览者系统的字体，可以做几个后备字体。
p { font-family:楷体,微软雅黑,宋体; } <p>这是一段文本</p>
font字体设置简写组合方式。格式如下：[是否倾斜|是否加粗|是否转小型大写]字体大小 字体名称；
p { font:50px 楷体 ; } <p>这是一段文本</p>
三．Web字体，也就是服务器端字体
虽说可以通过备用字体来解决用户端字体缺失问题，但终究用户体验不好，且不一定备用字体所有用户都安装了。所以，现在CSS提供了Web字体，也就是服务器端字体。
我们可以将字体下载放到html工程目录来使用
@font-face服务器提供字体
@font-face { font-family: abc; /*给字体一个名称*/ src: url('BrushScriptStd.otf'); /*连接字体文件路径*/ } p{ font-family: abc; font-size: 50px; } <p>这是一段html文本</p>
文本内容设置总汇
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-height 设置行高 1
word-wrap 控制段词 3
text-indent 设置文本首行的缩进 1
文本内容设置
text-decoration设置文本出现下划线。属性值如下表
值 说明
none 让本身有划线装饰的文本取消掉
underline 让文本的底部出现一条下划线
overline 让文本的头部出现一条上划线
line-through 让文本的中部出现一条删除划线
blink 让文本进行闪烁，基本不支持了
.a{ text-decoration: underline; } .b{ text-decoration: overline; } .c{ text-decoration: line-through; } .d{ text-decoration: blink; } <p class="a">这是一段文本</p> <p class="b">这是一段文本</p> <p class="c">这是一段文本</p> <p class="d">这是一段文本</p>
text-transform 设置英文文本转换为大小写。
值 说明
none 将已被转换大小写的值恢复到默认状态
capitalize 将英文单词首字母大写
uppercase 将英文转换为大写字母
lowercase 将英文转换为小写字母
.a{ text-transform: capitalize; } .b{ text-transform: uppercase; } .c{ text-transform: lowercase; } <p class="a">gyfygegff</p> <p class="b">kfklwfgiogvik</p> <p class="c">GFHPOIGHWEAP8YG</p>
text-shadow 解释：给文本添加阴影。其中四个值，第一个值：水平偏移；第二个值：垂直偏移；第三个值：阴影模糊度（可选）；第四个值：阴影颜色（可选）。
.a{ text-shadow :5px 5px 3px #ff272d; } <p class="a">gyfygegff</p>
text-align指定文本的对齐方式
值 说明
left 靠左对齐，默认
right 靠右对齐
center 居中对齐
justify 内容两端对齐，就是文本内容多的时候，保证两端都是对齐的
start 让文本处于开始的边界
end 让文本处于结束的边界
start和end属于CSS3新增的功能，但目前IE和Opera尚未支持。
.a{ text-align: left; } .b{ text-align: right; } .c{ text-align: center; } .d{ text-align: justify; } <p class="a">这是一段文本</p> <p class="b">这是一段文本</p> <p class="c">这是一段文本</p> <p class="d">简介：当梁宇方决意不出席铂尔曼酒店十五周年庆酒会的时候，他的父亲，也是酒店董事长的梁泽，以及总经理梁宇青，正殷殷期盼着能够在这个酒会上正式将他介绍出来。无心接班的宇方竟然藏身在马场和分别六年的爱马Sky驰骋草原。宇青的突然现身马场令他无所遁行，就这样被压回了酒店准备亮相。但宇方仍不甘示弱，仍伺机逃跑… 小歌星杜允儿来到酒店接周年庆的暖场演唱，向天微义不容辞同行来帮忙，两人仓皇找着</p>
white-space 处理空白排版方式。
值 说明
normal 默认值，空白符被压缩，文本自动换行，也就是无论多少个空格会被压缩显示一个空格，文本遇到挤压时自动换行
nowrap 空白符被压缩，文本不换行，也就是无论多少个空格会被压缩显示一个空格，文本遇到挤压时不自动换行
pre 空白符被保留，遇到换行符则换行，也就是有多少空格就显示多少空格，只有回车换行时才换行
pre-line 空白符被压缩，文本会在排满或遇换行符换行，无论多少个空格会被压缩显示一个空格，文本会在排满或遇回车换行
pre-wrap 空白符被保留，文本会在排满或遇换行符换行，也就是有多少空格就显示多少空格，文本会在排满或遇回车换行
.a{ white-space: normal; } .b{ white-space: pre; } .c{ white-space: pre-line; } .d{ white-space: pre-wrap; } <p class="a">这 是一段文本</p> <p class="b">这 是一段文本</p> <p class="c">这 是一段文本</p> <p class="d">这 是一段文本</p>
letter-spacing设置文本之间的间距
值 说明
normal 设置默认间距
长度值 比如：“数字”+“px”
p{ letter-spacing: 50px; } <p>这是一段文本</p> <p>这是一段文本</p> <p>这是一段文本</p> <p>这是一段文本</p>
word-spacing设置英文单子之间的间距
值 说明
normal 设置默认间距
长度值 比如：“数字”+“px”
p{ word-spacing: 50px; } <p>dislike vt.consider unpleasant; not like </p>
line-height设置段落行高
值 说明
normal 设置默认间距
长度值 比如：“数字”+“px”
数值 比如：1,2,3
% 比如：200%
p{ line-height: 1px; } <p>这是一段文本</p> <p>这是一段文本</p> <p>这是一段文本</p>
word-wrap让过长的英文单词断开
值 说明
normal 单词不断开
break-word 断开单词
text-indent设置文本首行的缩进
值 说明
normal 设置默认间距
长度值 比如：“数字”+“px”
p{ text-indent: 50px; } <p>简介：当梁宇方决意不出席铂尔曼酒店十五周年庆酒会的时候，他的父亲，也是酒店董事长的梁泽，以及总经理梁宇青，正殷殷期盼着能够在这个酒会上正式将他介绍出来。无心接班的宇方竟然藏身在马场和分别六年的爱马Sky驰骋草原。宇青的突然现身马场令他无所遁行，就这样被压回了酒店准备亮相。但宇方仍不甘示弱，仍伺机逃跑… 小歌星杜允儿来到酒店接周年庆的暖场演唱，向天微义不容辞同行来帮忙，两人仓皇找着宴</p>
