Question

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

Answer 1

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

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

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

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

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

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

行高为 14px时：

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

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

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

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

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

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