css文本与字体常见用法集合

总结一下项目中常见的文本和字体的样式设置

文本

text-align-last： 段落的最后一行的对齐方式

// 末尾右对齐
p{ text-align-last: right;}
// 文本两端对齐
p{ text-align-last: justify;}

text-decoration 文本修饰，下划线、上划线、删除线等。

// 中间删除线
p{ text-decoration：line-through;}

text-indent 首行文本的缩进

// 首行缩进20px
p{ text-index：20px;}

text-overflow 文本溢出

// 溢出的文本设置为点
p {
white-space:nowrap; 
overflow:hidden;
text-overflow:ellipsis
}

text-transform 控制文本中的字母

// 文本中的每个单词以大写字母开头
p {
text-transform: capitalize;
}

-webkit-text-stroke 文本字符指定了宽和颜色（类似于描边）

// 文本描边2px以及描边颜色
p {
-webkit-text-stroke: 2px #03a9f4;
}

-web
white-space 指定元素内的空白怎样处理

// 文本不会换行
p {
white-space：nowrap;
}

word-break 在合适的点换行

p {
word-break:hyphenate;
}

word-spacing 增加或减少单词间的间隔

// 规定段落中的字间距是 25 像素
p {
word-spacing:25px;
}

letter-spacing 单个字符间距

// 规定字符的字间距是 2 像素
p {
letter-spacing:2px
}

writing-mode 定义了文本在水平或垂直方向上如何排布

// 垂直方向自右而左的书写方式
p {
writing-mode: vertical-lr;
}

字体

设置字体：font-family
font-family属性可以设置几个字体名称作为一种"后备"机制，
如果浏览器不支持第一种字体，他将尝试下一种字体。

p {font-family:"Times New Roman", Times, serif;} 

字体样式：font-style
font-style定义字体的样式主要属性有三个值
正常 font-style:normal
斜体 font-style:italic
倾斜 font-style:oblique

设置字体大小
常用的设置字体大小有四个单位 px 百分比 em rem（vh、vw，这些笔者也不会，不知道能不能设置字体大小…）
px不必多说，
百分比相对父元素的font-size。
em相对自身font-size的大小，如果自身没有设置font-size的话则向上找寻直到body,这点百分比也一样。
rem相对于根元素；

简写
顺序：font-style | font-variant | font-weight | font-size | line-height | font-family
例如：.font{font:italic small-caps bold 12px/1.5em arial,verdana;}