网页基础之文字文本的样式设置

1.字体的常用样式设置

字体的样式有许多种，如果想了解详细的种类，推荐去MDN上去查看，这里只列举几种一般使用的属性，即斜体font-style:italic， 粗体 font-weight， 类型font-family, 大小font-size，显示行高line-height ，文字横向显示位置定义 text-align，文字下划线的定义text-decoration， 首行缩进定义text-indent，字符间距定义letter-spacing，单词间隔word-spacing等。

1)斜体 font-style: italic

斜体字在一些文档中可用作强调的作用，字体的斜体样式可以通过 font-style 来设置，如下图

2) 粗体 font-weight: bold

粗体字在网页中的运用一般是指标题之类的需要突出显示的文字，粗体的样式可通过 font-weight 来设置，如下图：

3) 字体类型 font-family: “微软雅黑”

字体类型就如word 文档工具中的字体类型设置，它在css 中使用的是font-family 来定义的，如下图：

4) 字体大小 font-size

顾名思义，就是文字文本的显示大小，如下图：

5) 行高 line-height

即指一行的显示高度，这个属性是前端开发中一个超级高频的属性，一些原本很难看的排版，一旦设置了适当的行高就会显得好看许多，如下图所示：

行高为 14px时：

6) 文字横向显示属性 text-align

文字横向显示方向的属性定义一般有三种，left, right, center。Left 左边对齐显示，right 右边对齐显示，center 居中显示

7) 文字划线定义样式属性 text-decoration

underline（下划线），line-through（错划线），wavy underline（波浪下划线），green wavy underline（带颜色的波浪下划线）等，详情请查阅MDN文档，如：

8) 首行缩进属性text-indent

9) 字符间距定义 letter-spacing

10) 词语间距定义 word-spacing

使用空格将多个文字分开时，word-spacing 才会将它当成词语，这样才会生效。例如：

以上两段话，第一段话是将词语使用空格分开了，因此对word-spacing 设置是生效的，第二段话是没有使用空格将词语分开的效果所以就看不到效果。

2. 文字文本属性的结合使用

像前面所讲的border, background 一样，文字文本也可以多个属性简写，一般能一起简写在一起属性主要有三个，粗体，字体大小，字体类型。例如：

本小节主要针对文字和文本的样式做了个具体的分析讲解，当然文字和文本的样式设置还远不止以上列举的那些，以上列举的只是用得比较多的一些属性，具体其它的属性大家可以根据需要取查阅MDN上面的一些介绍