文本格式化

1. 字体属性

（1）字体⼤⼩

字体⼤⼩可以使⽤不同的单位，如px、pt、em、rem、vw等等，不允许负值像素，尽量不出现⼩数。pt是ui经常会⽤的单位，dpi： 直接来说就是⼀英⼨多少个像素点，可以理解为像素密度，pt = px * dpi / 72 ，遇到pt的设计图怎么处理，pc端⻚⾯使⽤px，移动端可以使⽤em，rem以及vw
font-size: 30px; 字体大小属性
    取值，如px、pt、em、rem、vw等等，不允许负值像素，尽量不出现⼩数。
    px像素
    pt磅
    em⽗级元素的倍数
    rem根标签的倍数
    vw视窗尺⼨
⽤户的浏览器默认渲染的⽂字⼤⼩是“16px”（⼤多数浏览器）“em”是⼀个相对的⼤⼩，相对的是"⽗级元素"的字体⼤⼩，我们可以这样来设置1em，0.5em，1.5em。

 （2）字体系列

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;

 （3）字体字重

font-weight 字体的字重，字的粗细
于 1 和 1000 之间的数字类型值，必须要是100的倍数。
常⽤关键词：normal（400 默认）、bold（700）
浏览器不同展现效果不同，需要注意

（4）字体样式

在⼀般情况下，因为部分标签带有⾃⼰的样式，所以⼀些公司在css样式重置的时候会先把所有的字体样式搞成统⼀的，⽐如具有斜体的 <i> 标签,会先把它变成默认样式再进⾏操作。 【注意】加粗的标签也会变成默认粗细。不建议使⽤标签做斜体
font-style 字体样式属性
font-style: normal; 默认正常
font-style: italic; 斜体

 （5）字体的简写⽅式

font:italic 400 40px chiller;
顺序：字体样式 字重 字号 字体系列，不可改变顺序
最简⽅式 font：40px chiller; 字号和字体系列，不能再减少

2. ⽂本属性

（1）字体颜⾊

注意：不同终端展示颜⾊可能不同，尽量使⽤web安全⾊，或者沟通颜⾊的要求
color：颜⾊的⾊值
取值:英⽂，⼗六进制，rgba()，其他

（2）⽂本的⽔平对⻬⽅式

text-align 针对块级元素中的内联元素，它需要写在⽗级（块级元素）中，不能写在⼦元素中（⽂字本身和内联元素）
取值
    left 默认,左对⻬
    center 居中对⻬
    right 右对⻬
关于两端对⻬属性（不常⽤）针对标签中的⽂本，两端对⻬,针对英⽂的多⾏⽂本，单⾏和强制换⾏的情况不进⾏渲染,中⽂的两端对⻬不管⽤。
内联元素（单个）与⽂字（单⾏）在⽗级⽔平居中的⽅式：是对块级元素中的⽂字，或对块级元素的内联元素⽔平居中，这个元素需要给⽗级（块元素），块级
元素的⽔平居中不能使⽤该属性。

(3) ⽂本的⾏⾼

line-height 属性可以设置⽂本的⾏间距,可使⽤⻓度单位px，或使⽤⽆单位的倍数如1，1.5，2
⽂本的⾏⾼包括⽂字上下间距+⽂本⾼度，⽂本居中上下⾏间距相等
使⾏间距等于元素⾼度，则“单⾏⽂本”垂直显示在元素中
【扩展知识，不要求掌握】多⾏⽂本居中不能使⽤⾏⾼ padding-top（⾼度-（单⾏⾏⾼*⾏数））/2 还要 box-sizing: border-box

(4) ⽂本的线条修饰

在使⽤a标签的时候有⼀个默认下划线,有时不需要,在css reset 中将a标签的默认下划线去掉
text-decoration: none; ⽆线条
text-decoration: underline; 下划线
text-decoration: overline; 上划线
text-decoration: line-through; 删除线

（5）⾸⾏缩进

text-indent 指定块容器中第⼀⾏⽂本的缩进
text-indent:2em 两倍的字体⼤⼩,相当于空两格

(6)⽂本的换⾏

1.⽂本换⾏的原因

        正常⽂字的换⾏(亚洲⽂字和⾮亚洲⽂字)元素拥有默认的 white-space:normal ,到定义的宽度之后⾃动换⾏。

         对于连续的英⽂字符和阿拉伯数字不能换⾏,这是因为div中，英⽂字⺟之间没有空格的话，它会默认认为这是⼀个英⽂单词，所以单词就⼀次输出不换⾏

2.换⾏属性

         white-space: nowrap; 不换⾏

         word-wrap:break-word; 强制换⾏

（7）⽂本溢出

各浏览器对 text-overflow:ellipsis ⽀持都不统⼀，特别是表现形式上，因此它的兼容性并不好。

 /* 出现省略标记 */
 .d1 {
 background-color: turquoise;
 width: 150px;
 /* 超出部分隐藏（后⾯会学） */
 overflow: hidden;
 /* 当对象内⽂本溢出时显示省略标记（...） */
 text-overflow: ellipsis;
 /* 强制不换⾏ */
 white-space: nowrap;
 }
 /* 多⾏省略，兼容性不佳慎⽤ */
 .d2 {
 background-color: pink;
 overflow: hidden;
 text-overflow: ellipsis;
 /* 兼容性 */
 display: -webkit-box;
 -webkit-line-clamp: 4;
 -webkit-box-orient: vertical;
 }

 

 （8）⽂字阴影

⽂字阴影和盒⼦阴影类似,都需要具有关键的内容,但没有内阴影

text-shadow 为⽂字添加阴影。

可以添加多个阴影，阴影值之间⽤逗号隔开。

参数：

        第⼀个值和第⼆个值代表： x轴上的偏移量 和y轴上的偏移量,⻓度单位，可以为负值。

        第三个值代表：模糊半径的⼤⼩（⽻化）。【可选】

        第四个值代表：颜⾊值。【可选】

/* x轴偏移 | y轴偏移 | 模糊半径 | 颜⾊ */
text-shadow: 1px 1px 2px black;

.d1 {text-shadow: 2px 3px 10px green;}
.d2 {text-shadow: 4px 5px 2px red, -4px -5px 2px blue;}
.d3 {
 color: transparent;
 text-shadow: 0 0 40px #000;
}