一、字体 ( Font )
1、font
属性描述： 设置或获取对象中的文本特性，复合属性
语法模板：
font：[ [ <font-style> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-famil> ]
默认值： 根据每个独立属性设置
属性值描述（必须按照顺序写）：
<font-style>：指定文本字体样式;
<font-variant>：指定文本是否为小型的大写字母;
<font-weight>：指定文本字体的粗细;
<font-size>：指定文本字体尺寸;
<line-height>：指定文本字体的行高;
<font-family>：指定文本使用某种字体样式或字体序列;
适用元素：** 所有元素
是否具有继承性： 是
是否具有动画性： 根据每个独立属性设置
脚本接口： font
注意事项： 使用第一种声明方式参数必须按照如上的排列顺序，且<font-size>和 <font-family> 是不可忽略的。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值
2、font-style
属性描述： 设置或获取对象中的文本字体样式
版本变更： 否
语法模板：
font-style：normal | italic | oblique
默认值： normal
属性值描述：
normal：指定文本字体样式为正常的字体;
italic：指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique;无法保证所有浏览器均能实现;
oblique：指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字;
适用元素： 所有元素
是否具有继承性： 是
是否具有动画性： 否
脚本接口： fontStyle
3、font-variant
属性描述： 设置或获取对象中的文本是否为小型的大写字母
版本变更： 否
语法模板：
font-variant：normal | small-caps
默认值： normal
属性值描述：
normal：正常的字体;
small-caps：小型的大写字母字体;
适用元素： 所有元素
是否具有继承性： 是
是否具有动画性： 否
脚本接口： fontVariant
4、font-weight
属性描述： 设置或获取对象中的文本字体的粗细
版本变更： 否
语法模板：
font-weight：normal | bold | bolder | lighter | <integer>
默认值： normal
属性值描述：
normal：正常的字体，相当于数字值400;
bold：粗体，相当于数字值700;
bolder：定义比继承值更重的值;
lighter：定义比继承值更轻的值;
<integer>：用数字表示文本字体粗细，取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
适用元素： 所有元素
是否具有继承性： 是
是否具有动画性： 是
脚本接口： fontWeight
注意事项： 作用由客户端系统安装的字体的特定字体变量映射决定。系统选择最近的匹配。也就是说，用户可能看不到不同值之间的差异
5、font-size
属性描述： 设置或获取对象中的字体尺寸
版本变更： 否
语法模板：
font-size：<absolute-size> | <relative-size> | <length> | <percentage>
<absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large
<relative-size> = smaller | larger
默认值： medium
属性值描述：
<absolute-size>：根据对象字号进行调节，以 medium 作为基础参照，xx-small相当于medium 3/5 (h6)，x-small: 3/4，small: 8/9 (h5)，medium: 1 (h4)，large: 6/5 (h3)，x-large: 3/2 (h2)，xx-large: 2/1 (h1);
<relative-size>：相对于父对像中字号进行相对调节，使用成比例的em单位计算;
<length>：用长度值指定文字大小，不允许负值;
<percentage>：用百分比指定文字大小，其百分比取值是基于父对象中字体的尺寸，不允许负值;
适用元素： 所有元素
是否具有继承性： 是
是否具有动画性： 是
脚本接口： fontSize
6、line-height
font: normal small-caps 900 24px/4.5 "黑体";
其中24/4.5 表示字体行高是字体尺寸的4.5倍，默认为1、1.2
7、font-family
属性描述： 设置或获取对象中文本的字体名称序列
版本变更： 否
语法模板：
font-family：<family-name> *
<family-name> = arial | georgia | verdana | helvetica | simsun and etc.
默认值： 由user agent决定 谷歌默认：微软雅黑
属性值描述：
<family-name>：字体名称，按优先顺序排列，以逗号隔开，如果字体名称包含空格或中文，则应使用引号括起;
适用元素： 所有元素
是否具有继承性： 是
是否具有动画性： 否
脚本接口： fontFamily
注意事项：
- 一般字体引用可以不加引号，如果字体名包含了空格、数字或者符号（如连接符）则需加上引号，避免引发错误
- 备用列表，即多种字体，
user agent会遍历定义的字体序列，直到匹配到某个字体为止，否则用浏览器默认字体，原因：浏览器不同支持的字体不同
二、文本 ( Text )
1、text-transform
属性描述： 设置或获取对象中的文本的大小写
版本变更： 否
语法模板：
text-transform：none | capitalize | uppercase | lowercase
默认值： none
属性值描述：
none：无转换;
capitalize：首字母大写;
uppercase：将每个单词转换成大写;
lowercase：将每个单词转换成小写;
适用元素： 所有元素
是否具有继承性： 是
是否具有动画性： 否
脚本接口： textTransform
2、white-space
属性描述： 设置或获取对象内空格的处理方式
版本变更： 否
语法模板：
white-space：normal | pre | nowrap | pre-wrap | pre-line
默认值： normal
属性值描述：
normal：默认处理方式;
pre：用等宽字体显示预先格式化的文本，不合并空格（文字间的空白距离），当文字超出边界时不换行，有回车符则换行；
nowrap：强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象;
pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行;
pre-line：保持换行符并换行，不保留空格，当文字碰到边界时不许溢出，强制换行;
适用元素： 所有元素
是否具有继承性： 是
是否具有动画性： 否
脚本接口： whiteSpace
3、text-align@3
属性描述： 设置或获取对象中内容的水平对齐方式
版本变更： 是
语法模板：
text-align： left | right | center | justify@3
默认值： start
属性值描述：
left：内容左对齐;
center：内容居中对齐;
right：内容右对齐;
/***css3中添加的新属性***/
justify：内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理;
适用元素： 块容器
是否具有继承性： 是
是否具有动画性： 否
脚本接口： textAlign
4、word-spacing@3
属性描述： 设置或获取对象中的单词之间的最小，最大和最佳间隙
版本变更： 是
语法模板：
word-spacing：normal | <length> | <percentage>@3
默认值： normal
属性值描述：
normal：默认间隔;
<length>：用长度值指定间隔。可以为负值；默认值：0，实则4px
<percentage>：用百分比指定间隔。可以为负值;
适用元素： 所有元素
是否具有继承性： 是
是否具有动画性： 是，非normal值时
脚本接口： wordSpacing
注意事项：
- 该属性将指定的间隔添加到每个单词(词内不发生)之后，但最后一个字将被排除在外
- 判断是否为单词的依据是单词间是否有空格
5、letter-spacing@3
属性描述： 设置或获取对象中的字符之间的最小，最大和最佳间隙
版本变更： 是
语法模板：
letter-spacing：normal | <length> | <percentage>@3
默认值： normal
属性值描述：
normal：默认间隔;
<length>：用长度值指定间隔。可以为负值;
<percentage>：用百分比指定间隔。可以为负值;
适用元素： 所有元素
是否具有继承性： 是
是否具有动画性： 是，非normal值时
脚本接口： letterSpacing
注意事项：
- 该属性将指定的间隔添加到每个文字(包括单词内的每个字母)之后
<letter-spacing>不能被应用于一行的开始和结束
6、text-indent
属性描述： 设置文本缩进
版本变更： 是
语法模板：
text-indent：[ <length> | <percentage> ]
默认值： 0
属性值描述：
indent: 缩进
<length>：用长度值指定文本的缩进，可以为负值;
<percentage>：用百分比指定文本的缩进，可以为负值;
适用元素： 块容器
是否具有继承性： 是
是否具有动画性： 是，当使用值为非关键字时
脚本接口： textIndent
注意事项： 内联对象要使用该属性必须先使该对象表现为块级或内联块级
7、vertical-align
属性描述： 设置或获取内联元素在行框内的垂直对其方式
版本变更： 是否
语法模板：
vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
默认值： baseline
属性值描述：
baseline：将支持valign特性的对象的内容与基线对齐;
sub：垂直对齐文本的下标;
super：垂直对齐文本的上标;
top：将支持valign特性的对象的内容与对象顶端对齐;
text-top：将支持valign特性的对象的文本与对象顶端对齐;
middle：将支持valign特性的对象的内容与对象中部对齐;
bottom：将支持valign特性的对象的文本与对象底端对齐;
text-bottom：将支持valign特性的对象的文本与对象顶端对齐;
<percentage>：用百分比指定由基线算起的偏移量，可以为负值，基线对于百分数来说就是0%;
百分比参照当前行的行高，若为正值则从基线往上走，否则往下走；
<length>：用长度值指定由基线算起的偏移量，可以为负值，基线对于数值来说为0;
适用元素： 内联及 table-cell 元素
是否具有继承性： 否
是否具有动画性： 是，当值为<length>时
脚本接口： verticalAlign
8、line-height
属性描述： 设置或获取对象的行高
版本变更： 否
语法模板：
line-height：normal | <length> | <percentage> | <number>
默认值： normal
属性值描述：
normal：允许内容顶开或溢出指定的容器边界;
<length>：用长度值指定行高，不允许负值;
<percentage>：用百分比指定行高，其百分比取值是基于字体的高度尺寸，不允许负值;
<number>：用乘积因子指定行高，不允许负值;
适用元素： 所有元素
是否具有继承性： 是
是否具有动画性： 是，当值为<length>| <number> 时
脚本接口： lineHeight
9、word-break@3
属性描述： 设置或获取对象内文本的字内换行行为
语法模板：
word-break：normal | keep-all | break-all
默认值： normal
属性值描述：
normal：依照亚洲语言和非亚洲语言的文本规则，允许在字内换行;
keep-all：与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本;
break-all：该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断行;
适用元素： 所有元素
是否具有继承性： 是
是否具有动画性： 否
脚本接口： wordBreak
注意事项： 对于解决防止页面中出现连续无意义的长字符打破布局，应该使用break-all属性值
10、word-wrap@3
属性描述： 设置或获取当内容超过指定容器的边界时是否断行
语法模板：
word-wrap：normal | break-word
默认值： normal
属性值描述：
normal：允许内容顶开或溢出指定的容器边界;
break-word：内容将在边界内换行。如果需要，单词内部允许断行;
适用元素： 所有元素
是否具有继承性： 是
是否具有动画性： 否
脚本接口： wordWrap
注意： 都是文本断行处理
word-warp: blank-word; 火狐
word-break: blank-word; IE，不能与上方同时出现
11、overflow-wrap@3
属性描述： 设置或获取当内容超过指定容器的边界时是否断行
版本变更： 是否
语法模板：
overflow-wrap：normal | break-word
默认值： normal
属性值描述：
normal：允许内容顶开或溢出指定的容器边界;
break-word：内容将在边界内换行。如果需要，单词内部允许断行;
适用元素： 所有元素
是否具有继承性： 是
是否具有动画性： 否
脚本接口： overflowWrap
注意事项： CSS3中将 <word-wrap> 改名为 <overflow-wrap>；由于历史原因，当你使用 <overflow-wrap> 时，最好同时使用 <word-wrap> 作为备选，作向前兼容
12、自定义字体
涉及到网络请求
@font-face{
font-family:"catoon"; 卡通，用于自定义字体取名
src:url("./正方卡通简体.ttf");
}
p{
font-family: "cartoon";
}
解决方案：
问题：不同的字体出现在同一行中会出现很多问题
<head>
<style>
使字体在图片中垂直居中
/* p>*{
position:absolute;
line-height:300px;
}*/
img{
/*line-height: 300px; */该行高是span的行高，并非图片
vertical-align: middle;根据中心线对齐
vertical-align:bottom; 根据底边对齐
vertical-align:text-bottom; 根据字体底部对齐
}
span{
vertical-align: middle;
/*vertical-align:bottom;
vertical-align:text-bottom;*/
}
</style>
</head>
<body>
<p style=" background-color: aqua;" >
<img src="./1.bmp" alt="">
<span>computer</span>
</p>
</body>
总结：
-
一行中出现不同的字体，会造成行高不同，最终行高值以最高点和最低点的距离为准
-
一行中出现不同的字体，会造成有些内容的底部空白高度不同，可以采用根据text-bottom、bottom、middle居中
但middle只对行内元素起作用
-
text-align 与vertical-align的区别
text-align一般定义在父元素上，它表示子元素以什么形式在水平对齐
vertical-align必须定义在子元素上，在子元素上以什么样式居中对齐
三、文本装饰 ( Text Decoration )
text-decoration
属性描述： 设置或获取对象中的文本装饰线条的位置
版本变更： 否
语法模板：
text-decoration：none | [ underline || overline || line-through ]
默认值： none
属性值描述：
none：指定文字无装饰;
underline：指定文字的装饰是下划线;
overline：指定文字的装饰是上划线，无法改变位置;
line-through：指定文字的装饰是贯穿线;
blink： 表示文字会闪烁，但无法实现
适用元素： 所有元素
是否具有继承性： 否
是否具有动画性： 否
脚本接口： textDecoration
四、属性类别
text-shadow@3
属性描述： 设置或获取对象中文本的文字是否有阴影及模糊效果
语法模板：
text-shadow：none | <shadow> [ , <shadow> ]*
默认值： none
属性值描述：
none：无阴影;
<length>①：第1个长度值用来设置对象的阴影水平偏移值，可以为负值;
<length>②：第2个长度值用来设置对象的阴影垂直偏移值，可以为负值;
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值，不允许负值;
<color>：设置对象的阴影的颜色;
适用元素： 所有元素
是否具有继承性： 是
是否具有动画性： 是
脚本接口： text-shadow
注意事项： 可以设定多组效果，每组参数值以逗号分隔