文本

1、简单字体：

不在css中设置时也可显示，如下均能显示：

（1）      font: 13px;

（2）      font: "微软雅黑";

用font设置字体，浏览器的兼容性不太好

2、基本字体：

font-family: "微软雅黑";//字体

一般pc端使用宋体，wap使用微软雅黑

禁止用中文属性值

font-size: 15px;//大小

font-style:italic;//粗细斜等

font-weight: 300;//加黑比重

font-size-adjust:initial;//是否强调对文本使用同一尺寸

font-stretch:condensed;//是否横向拉伸

3、细化文本：

/*词与词间距*//*normal，length*/

word-spacing:10px;

/*字符间的间距*//*normal，length*/

letter-spacing:20px;

/*文本的垂直对齐方式*//*baseline,sub,super,bottom,text-bottom,top,middle,百分比，长度*/

vertical-align:top;

/*文本修饰线*//*none：默认空，underline：下划线，overline：上划线，linethrough：删除线，blink：闪烁线*/

text-decoration:line-through;

/*文本首行缩进*//*长度和百分比，兼容性不好*/

text-indent: 30px;

/*文本水平对齐方式，只在块状元素才有效*/

text-align:center;

/*文本行高*/

/*行高，小于文字大小时，按文字大小，不会被文字的换行而改变*/

/*如果把height定义为2px，则换行后，div高度变为4px*/

line-height: 2px;

/*uppercase：大写，capitalize：首字母大写，lowercase：小写*/

text-transform:lowercase;

/*文本方向*/

direction: rtl;

4、阴影属性：

text-shadow：length||length||opacity||color

左右偏移距离||上下偏移距离||模糊度||阴影颜色

（1）设置描边效果

           p[lang="b"]{

                    font-family:"微软雅黑";

                    font-weight:bold;

                    font-size:130px;

                    color:beige;

                    text-shadow:-3px 0 blue,/*左阴影*/

                                                0-3px blue,/*上阴影*/

                                               3px0 blue,/*右阴影*/

                                                03px blue;/*下阴影*/

           }

（2）凹陷效果：右和下设为黑色

           p[lang="c"]{

                    font-family:"微软雅黑";

                    font-weight:bold;

                    font-size:130px;

                    color:beige;

                    text-shadow:-3px 0 blue,/*左阴影*/

                                                0-3px blue,/*上阴影*/

                                                3px0 black,/*右阴影*/

                                                03px black;/*下阴影*/

           }

（3）凸起效果：右和下设为白色

           p[lang="d"]{

                    font-family:"微软雅黑";

                    font-weight:bold;

                    font-size:130px;

                    color:beige;

                    text-shadow:-3px 0 blue,/*左阴影*/

                                                0-3px blue,/*上阴影*/

                                                3px0 azure,/*右阴影*/

                                                03px azure;/*下阴影*/

           }

（4）文本的发光效果:没有偏移的模糊设置就是发光

           p[lang="e"]{

                    font-family:"微软雅黑";

                    font-weight:bold;

                    font-size:130px;

                    color:beige;

                    text-shadow:0 0 10px black;

           }

5、溢出属性text-overflow:

overflow: hidden;   /*溢出内容设为隐藏*/

white-space: nowrap;  /*强制文本单行显示*/

text-overflow: ellipsis;  /*设置溢出文本显示为省略标记, ellipsis：显示…，clip：直接裁切*/

6、文本换行word-wrap:

一般都是单行的，需要换行时要考虑是否指定了高度，是否需要向下撑开等。

word-wrap:normal|break-word.normal:默认连续文本换行，允许内容超出边界，break-word：内容将在边界内换行，如果需要，词内转换也会发生，设置与否区别如下：

 

7、字内换行word-break：

normal|break-all|keep-all

normal：默认，根据自己的规则换行

break-all：可以强制截断英文，词内换行

keep-all：只能在标点符号处换行

8、处理空白元素white-space：

nowrap：单行显示，需要单行显示时不要设置word-wrap

normal：空白处被浏览器忽略

pre：预定义

pre-line：合并空白符，保留换行符

pre-wrap：保留空白正常换行