第七十二节，文本样式

文本样式

学习要点：
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>