5.CSS笔记：字体、文本属性
本系列内容由ZouStrong整理收录
整理自 《写给大家看的CSS书（第2版）》、《CSS权威指南（第3版）》、《精彩绝伦的CSS》、《精通CSS：高级Web标准解决方案（第2版）》、CSS参考手册 css.doyoe.com
CSS拥有很多属性，正是这些属性决定了网页显示的样式，所有属性都会有一个初始的默认值，并且不同的属性适用的元素类型也有很大的不同
设置字体和文本属性是CSS最常见的用途之一
一. 字体属性
1. font-family属性
- 作用：指定字体系列
- 默认值：用户代理（浏览器）决定
- 适用于：所有元素
- 继承性：有
- 动画性：无
- 可取值：所有字体名称
示例：
p {font-family: arial;}font-family 通常指定的是一个字体系列，而不是单个的字体
5种通用字体系列
- serif——代表带衬线的字体（包括Times New Roman，Palatio等）
- sans-serif——代表无衬线的字体（包括Arial，Verdana等）
- monospace——代表等宽字体
- cursive——代表手写字体
- fantasy——代表未分类的字体
当然也可以指定特定字体名
字体不属于浏览器，而是由操作系统决定，由于不能保证操作系统是否安装了指定的字体，所以通常会同时指定多种字体（最后通常是一个字体系列，留做后路），按优先顺序排列，用逗号分隔。中文字体名或者包含空格，连接符的字体名，必须用引号括起来，如果这些字体都没有的话，最后会使用默认字体
p {font-family: arial , tahoma , "Microsoft Yahei";}，就可以包含嵌入字体
2. font-size属性
- 作用：指定字体大小
- 默认值：medium
- 适用于：所有元素
- 继承性：有
- 动画性：有
- 可取值：长度值、百分数、关键字（small等，不常用）
示例：
p { font-size: 12px;}百分数会相对于从父元素继承来的大小来计算（最终取整）
3. font-weight属性
- 作用：指定字体粗细
- 默认值：normal
- 适用于：所有元素
- 继承性：有
- 动画性：有
- 可取值：100、200、…. 、900的9级加粗度，或者lighter、normal、bold、bolder等关键字
示例：
p {font-weight: bold;}使用100~900并没有固定的加粗度，CSS规定，只要一个关键字不比前一个关键字对应的变形更细，就是允许的，所以100~400一般都对应同样的较细的变形，500~600对应同样的较粗的变形，而700~900对应同样的更粗的变形（一般400对应于normal，700对应于bold）
4. font-style属性
- 作用：指定字体样式
- 默认值：normal
- 适用于：所有元素
- 继承性：有
- 动画性：无
- 可取值：normal、italic（倾斜）、oblique（倾斜）
示例：
p {font-style: italic;}italic会指定文本字体样式为斜体；而oblique是指定文本字体样式为倾斜的字体（人为的使文字倾斜，而不是去选取字体中的斜体字）
5. font-variant属性
- 作用：指定字体变形
- 默认值：normal
- 适用于：所有元素
- 继承性：有
- 动画性：无
- 取值：normal、small-caps（小型大写字母，即大写不变，小写变成小型的大写字母）
示例：
p {font-variant: small-caps;}6. font属性（简写）
- 作用：同时指定字体的多个属性
- 默认值：由单个属性决定
- 适用于：所有元素
- 继承性：有
- 动画性：由单个属性决定
- 取值：由单个属性决定，或者一个关键字（见后）
示例：
p {font: italic bold small-caps 14px arial,tahoma; }前三个值没有顺序之分，且都可以省略
后两个值必须出现，且顺序必须是font-size在前，font-family在后（多个声明之间分号分隔，同一声明多个属性值用空格分隔，多个字体族之间用逗号分隔）
增加行高
使用font时，还可以设置line-height属性（文本属性，详见后），紧跟字体大小之后，以"/"分隔（因为line-height最好就是相对于本身的字体大小来计算，保证不论字体大小怎么变化都不影响阅读,所以最好不要带单位）
p {font: 14px/1.5 arial;}简写属性的问题
（适用于所有简写属性，margin、padding除外）当忽略简写属性中的某个值时，其会自动获得某个默认值，这有可能意外导致覆盖手动设置的属性
p {font-weight:bold}
p {font: 14px/1.5 arial;} 最终字体没有被加粗，被font中默认的font-weight:normal覆盖
使用系统字体
当我们希望Web页面跟用户的操作系统风格相似时，可以使用系统字体关键字来设置font
这些关键字取得操作系统中元素的字体大小、粗细、风格、变形和字体系列，并应用到指定元素
- caption：使用有标题的系统控件的字体
- icon：使用图标标签的字体
- menu：使用菜单的字体
- message-box：使用信息对话框的字体
- small-caption：使用小控件的字体
- status-bar：使用窗口状态栏的字体
示例：
button { font:caption }这样就可以把一个按钮的字体设置为与系统按钮的字体完全相同，利用这些值，可以创建一个基于Web的应用，使之看上去类似于系统自带的应用
系统字体只能整体设置，也就是字体系列、大小、粗细...等一起设置，上例中的按钮文本与操作系统中的按钮文本完全相同，而不论其大小与周围的内容是否匹配，但可以修改单个值，来调整
button { font:caption;font-size:1em; }7. font-stretch属性（CSS3新增）
- 作用：指定字体横向拉伸
- 默认值：normal
- 适用于：所有元素
- 继承性：有
- 动画性：有
- 取值：normal、condensed、expanded等
示例：
p {font-stretch:expanded;}7. font-size-adjust属性（CSS3新增）
- 作用：指定字体的aspect值（小写字母 "x" 的高度与字号之间的比率）
- 默认值：none
- 适用于：所有元素
- 继承性：有
- 动画性：有
- 取值：数字值
示例：
p {font-size-adjust: 0.5;}二. 文本属性
字体属性决定单个字体的外观，而文本属性决定了整段文本的显示方式
1. text-indent属性（CSS3有改动）
- 作用：指定文本首行缩进
- 默认值：0
- 适用于：inline-block和block
- 继承性：有
- 动画性：有
- 取值：任何长度值（正值或负值），如果是百分数，则相对于父元素的宽度来计算
示例：
p { text-indent:10px; }不可用于行内元素，行内元素首行缩进可用padding-left，margin-left来模拟
CSS3新增了hanging和each-line关键字，他们紧随在缩进数值之后
each-line：使缩进作用在块容器的第一行或者内部的每个强制换行的首行，软换行不受影响
hanging：反向所有被缩进作用的行
p { text-indent:10px each-line; }不可见的文本
有的时候，一个元素可能具有很重要的功能（返回按钮，刷新按钮等），这时候只需要为这个元素指定一个背景icon即可，元素内部是没有内容的
但是为了符合语义和搜索引擎优化，更为了使代码可读性强，我们最好是在元素内部加入一定量的文本，表明元素的作用，又因为此时的文本不需要展示给用户，因此可以使用text-indent将文字缩进到屏幕外
<b>刷新按钮</b>
b {display:block;width:12px;height:12px;
background:url(a.png) 0 0 no-repeat;
text-indent:-9999px;
}2. text-align属性（CSS3有改动）
- 作用：指定文本水平对齐方式
- 默认值：auto（由用户代理决定）
- 适用于：inline-block和block
- 继承性：有
- 动画性：无
- 取值：left、right、center、justify、start（css3）、end（css3）....
示例：
p { text-align: left; }注：text-align属性不会控制元素本身的对齐，而是影响元素内部内容
inline-block元素在这里表现出了很诡异的特性，因为既可以在该元素上使用text-align属性控制文本方向，其自身又能够被text-align属性控制水平对齐方向（所以可用来实现单行居中，多行居左的效果）
.outer {text-align:center;}
.inner { display:inline-block;text-align:left;}3. text-align-last属性（CSS3新增）
- 作用：指定最后一行（包括仅有一行文本）或者被强制打断的行的文本的水平对齐方式
- 默认值：auto（由用户代理决定）
- 适用于：inline-block和block
- 继承性：有
- 动画性：无
- 取值：left、right、center、justify、start、end....
作为IE的私有属性之一，IE5.5率先实现了 text-align-last ，后期被w3c采纳成标准属性
关于两端对齐（justify）
所有主流浏览器都支持text-align:justify，但是要想使之生效
首先，要在文本之间插入有空白，如空格（因为这样才认为不是一个单词，汉字也要空格分隔）
其次，对于强制打断的行和块内的最后一行（包括只有一行文本的情况）无效（对于这类情况，需使用text-align-last（CSS3新增），且IE浏览器下，如果text-align-last要生效，必须先定义text-align:justify）
因此，要想在所有浏览器下实现两端对齐，可以这样
对非IE及IE7以上浏览器使用伪元素:after生成额外的内容，置于第二行并将其隐藏，这时第一行文本就可以使用text-align:justify来对齐
对于支持text-align-last的浏览器（IE, Firefox）使用 text-align-last 处理
p {width:200px;text-align:justify;text-align-last:justify;}
p:after{display:inline-block;overflow:hidden;width:100%;height:0;content:'';}4. line-height属性
- 作用：指定文本行高——文本行基线之间的距离）
- 默认值：normal（通常字体大小的1.2倍）
- 适用于：所有元素
- 继承性：有
- 动画性：有
- 取值：任何数字值（不加单位表示是字体大小倍数，加单位表示实际值，百分数的话是相对于元素字体的大小）
示例：
p { line-height: 1.2em; }最直观的，行高可用来增加（减少）文本行之间的垂直间距，
文本行的每个元素都会生成一个内容区，这由字体大小决定，这个内容区则会形成一个行内框，不存在其他因素的情况下，行内框完全等于内容区的大小
由line-height产生的间距就是增加或减少各个行内框高度的因素之一
例如字体大小是14px，那么内容区的高度就是14px，如果此时将line-height设置为18px，那么行内框的高度将是18px，并且多出的4px会平均分布在内容区的上方和下方
一旦给定内容区生成了所有的行内框，接下来行框的构造就会考虑所有这些行内框，行框的高度恰好足以包含最高行内框的顶端和最低行内框的低端
行间距就是行高减去字体大小（可能是负值）
但是行高比字体大小多出的这一部分，会在字体上方和下方平均分配；由此，行高通常可用于单行文本的垂直居中，只要将行高设为元素高度即可，因为多出的行高被分配到文本上下方，致使文本始终居中（有内边距的情况下，行高应该设为——height - padding-top + padding-bottom）
注：如果为行高设置了固定单位（如px），那么增大字体可能导致行与行重叠，所以要使用倍数或者百分数表示行高
无单位的行高
除此之外，无单位的行高和有单位的还是有很大的区别
当定义了一个有单位的值或者百分数时，就会将计算的行高值传给所有后代元素
ul {font-size:12px;line-height:1rem;}
ul li {font-size:10px;}则li元素获得的行高是12px
当定义一个无单位的值，就只会将这个系数传递给后代元素，而不是计算后的值
ul {font-size:12px;line-height:1;}
ul li {font-size:10px;}则li元素获得的行高是10px
5. vertical-align属性
- 作用：指定行内元素本身的垂直对齐方式
- 默认值：baseline
- 适用于：inline-block和inline和表格元格
- 继承性：不可继承
- 动画性：有（取值为数字时）
- 取值：任何长度值、baseline、sub、super、top、text-top、middle、bottom、text-bottom
- 百分数：相对于元素的line-height值
示例：
span {vertical-align:baseline;}注：vertical-align不影响块级元素中内容的对齐（表单元格除外），而是影响行内元素本身的对齐
基线对齐——baseline
baseline要求当前元素的基线与父元素的基线对齐（或者说当前元素是图片或者表单等行内替换元素时，要求当前元素的底端（包括了外边距等）与父元素基线对齐）——浏览器的默认规则都是如此
上、下标——super和sub
sub要求当前元素的基线（或者对于替换元素，是底端）低于父元素的基线（具体低多少由用户代理决定）
super则要求当前元素的基线（或者对于替换元素，是底端）高于于父元素的基线（具体低多少由用户代理决定）
底端、顶端对齐——bottom和top
bottom要求当前元素行内框的底端与行框的底端对齐（top是行框顶端）
长度对齐
正值会将元素上移指定距离，负值下移
注：所有垂直对齐的元素都会影响行高，因为行内框的高度要足以包含最高行框的顶端和最低行内框的底端，这包括了因垂直对齐上升或者下降的行内框
注：在使用中文字体时，这个文本基线就有点蛋疼了，往往不是文字的最低端
6. word-spacing 属性（CSS33有改动）
- 作用：指定字间距 (空格分隔的任何字符)
- 默认值：normal（0）
- 适用于：所有元素
- 继承性：有
- 动画性：有
- 取值：任何长度值（正值或负值）
CSS3新增了使用百分比作为其取值
7. letter-spacing（CSS33有改动）
- 作用：指定字母间距（汉字间距也是这个属性）
- 默认值：normal（0）
- 适用于：所有元素
- 继承性：有
- 动画性：有
- 取值：任何长度值（正值或负值）
CSS3新增了使用百分比作为其取值
注：字间距和字母间距的值是指增加量（减少量），值为0意为间距不变（与默认值normal一样）而不是间距为0
8. white-space属性
- 作用：指定空白符（空格、换行、tab字符）的处理方式
- 默认值：normal
- 适用于：所有元素
- 继承性：有
- 动画性：无
- 取值：normal、pre、nowrap、pre-wrap、pre-line
normal值，即浏览器默认行为，把所有空白符合并为一个空格
pre值，会保留元素中所有的空白符（相当于pre标签）
nowrap值，会防止元素中的文本换行，除非遇到br元素
pre-wrap值，保留空白符序列，但是正常地进行换行
pre-line，合并空白符序列，但是保留换行符
p {white-space:nowrap;} /*强制文本一行显示*/9. text-transform属性（CSS3有改动）
- 作用：指定文本转换（大小写）
- 默认值：none
- 适用于：所有元素
- 继承性：有
- 动画性：无
- 取值：uppercase（大写）、lowercase（小写）、capitalize（首字母大写，其它字母原样返回）、none
CSS3新增了full-width值，表示将所有字符转换成fullwidth形式
10. word-break（CSS3）
- 作用：指定元素内文本的换行行为
- 默认值：normal
- 适用于：所有元素
- 继承性：有
- 动画性：无
- 取值：normal，keep-all——不允许字断开，break-all——允许字断开
对于解决防止页面中出现连续无意义的长字符打破布局，应该使用break-all
作为IE的私有属性之一，IE5.5率先实现了word-break ，后期被w3c采纳成标准属性
11. word-wrap或overflow-wrap（CSS3）
- 作用：指定内容超过容器边界时是否断行
- 默认值：normal
- 适用于：所有元素
- 继承性：有
- 动画性：无
- 取值：normal、break-word（会将单词内部断行）
作为IE的私有属性之一，IE5.5率先实现了 word-wrap ，后期被w3c采纳成标准属性
区别
word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；而word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了
CSS3中将 word-wrap 改名为 overflow-wrap（后者兼容性大不如前者，因此当使用后者时，最好同时使用前者，确保兼容性）
12. text-decoration属性
- 作用：指定文本装饰
- 默认值：none
- 适用于：所有元素
- 继承性：无
- 动画性：无
- 取值：none（不显示）、underline（下划线）、overline（上划线）、line-through（贯穿线）、blink(几乎没有支持的)
示例：
p {text-decoration: underline;}还可以同时指定：
p {text-decoration: underline overline;}注：下划线的颜色取决于当前元素字体的颜色
注：text-decoration不可继承，之所以能在子元素看到下划线什么的，是因为父元素的下划线经过了子元素而已
13. text-decoration-line属性（CSS3新增）
- 作用：指定文本的装饰
- 默认值：none
- 适用于：所有元素
- 继承性：无
- 动画性：无
- 取值： none、underline、overline、line-through、blink
注：即相当于CSS2.1的text-decoration属性，但是IE6、7、8不支持了
14. text-decoration-style属性（CSS3新增）
- 作用：指定文本装饰的形式
- 默认值：solid
- 适用于：所有元素
- 继承性：无
- 动画性：无
- 取值： solid、double、dotted、dashed、wavy
15. text-decoration-color属性（CSS3新增）
- 作用：指定文本装饰的颜色
- 默认值：文本颜色
- 适用于：所有元素
- 继承性：无
- 动画性：无
- 取值： 所有颜色值
16. text-decoration-skip属性（CSS3新增）
- 作用：指定文本装饰必须略过内容中的哪些部分
- 默认值：objects
- 适用于：所有元素
- 继承性：是
- 动画性：无
- 取值：none、objects、spaces、ink、 edges、box-decoration
17. text-decoration属性（简写，CSS3新增）
在CSS3中， text-decoration属性成为复合属性（text-decoration-line、text-decoration-style、text-decoration-color ）
所有浏览器均支持CSS2.1中的text-decoration属性
18. text-underline-position属性（CSS3新增）
- 作用：指定文本下划线的位置
- 默认值：auto
- 适用于：所有元素
- 继承性：是
- 动画性：无
- 取值：auto、under、left、right
19. text-shadow属性（CSS3新增）
- 作用：指定文本阴影和模糊效果
- 默认值：none
- 适用于：所有元素
- 继承性：有
- 动画性：有
- 取值：四个值
第1个长度值，必须，设置阴影水平偏移值，正值右移（可以为负值）
第2个长度值，必须，设置阴影垂直偏移值，正值下移（可以为负值）
第3个长度值，可选，设置阴影模糊半径（不允许负值）
第4个颜色值，可选，设置阴影颜色
text-shadow:10px 10px 10px #F80 ;两个偏移值是必须的，不偏移的话也要设为0，不能省略
颜色值可选，不设置即跟随字体颜色，且颜色值可出现在最前或者最后，只要保证三个长度值的位置和顺序就可以
text-shadow可接受一个以逗号分隔的阴影效果列表（也就是不同的阴影，炫酷必备）
text-shadow : 10px 10px 10px #F80 , 20px 20px 20px #F00 ;20. text-overflow属性（CSS3新增）
- 作用：指定内容超过容器边界时，是否使用省略标记
- 默认值：clip
- 适用于：适用于所有元素
- 继承性：无
- 动画性：无
- 取值：clip（直接裁切）、ellipsis（显示省略标记）
要实现超出显示省略号的效果，应该再定义两个样式：
white-space:nowrap; /*强制文本在一行内显示*/
overflow:hidden; /*超出隐藏*/
text-overflow:ellipsis;21. tab-size属性（CSS3新增）
- 作用：指定元素中制表符的长度
- 默认值：8
- 适用于：块级元素
- 继承性：有
- 动画性：有
- 取值：整数值、长度值
22. text-justif属性（CSS3新增）
- 作用：指定元素中文本使用的对齐方式
- 默认值：auto
- 适用于：块级元素
- 继承性：有
- 动画性：有
- 取值：auto、none、inter-word等