Html5与Css3Web字的属性（六）

web字号

px（）
百分比（较常用）
em（最常用）：一般1em=16px，相对单位。以父元素作参照系,父元素大小是不确定的

body{
    font-size:100%;    /*父元素默认为16px*/
}
h1{
    font-size:2.1875em; /*35px/16px*/
}

css3新增：rem，以根元素为参照系，根元素大小是确定的

html{
    font-size:100%;     /*通常为16px*/
}
h1{
    font-size:2.1875rem; /*35px/16px*/
}

使用关键字：xx-small、x-small、small、large、x-large、xx-large、

行高

line-hight：n；
n是数字（最常用方法），与字体的乘积为行高
n等于div高度，可使文字垂直居中

混合属性

font设置步骤
前三顺序随意：
字型（normal、italic/oblique）
粗细（normal、bold、bolder、lighter、100~900的倍数）
取消或设置小型大写字母（normal、small-caps）
按顺序：
字体大小
/行高
空格 优先次序输入字体系列，以“，”分隔

.p{
    font:italic small-caps bold .875em/1.3 "Palayino Linotype",Palatino,serif;
} 
/**斜体，小型大写字母，加粗，字号，行高，字体类型、备选字体/

设置背景

背景图片： background-image：url(01.png)
是否重复：background-repeat：repeat-x/repeat-x/no-repeat/repeat(默认)
起始位置： background-position：100px 100px;(或者top（页面位置）,center（显示位置）)
是否滚动：background-attachment：fixed/scroll(默认)/local
css3新增
background-clip：border-box(默认)
background-origin:padding-box(默认)
都接受相同的值：content-box包含内容，padding-box包含内容和内边距
background-size
contain：在显示图像完整宽高的情况下，尽可能的扩大图像的尺寸。背景图像可能不会填充整个背景区域
cover：在填充元素整个背景区域的情况下，让图像尽可能地小。图像的一部分可能会超出元素的范围，因而不可见
px、百分比或auto

控制间距

字间距：单词之间
word-spacing：0.4em
字偶距：字母之间
letter-spacing：0.4em

添加缩进

text-indent：2em
默认情况下对em、strong、cite等内联元素没有效果
仅适用块级元素。设置为dispay：block；或display：inline-block变为行内元素，就可以强制为其应用text-indent属性
将text-index设为负值，添加padding属性可防止文字跑到浏览器左边界
可继承

水平对齐文本

text-align：justify 文本两端对齐
仅适用块级元素。设置为dispay：block；或display：inline-block变为就可以强制为其应用text-indent属性

垂直对齐文本

vertical-align:middle居中

文本大小写转换

text-transform
uppercase：大写
lowercase：小写
none：用于消除继承
capitalize：每个单词首字母都大写

小型大小写

font-variant
使用：samll-caps
取消：none

换行

text-wrap：normal；

装饰文本

text-decoration
underline：下划线
overline：上划线
line-through：删除线
none：没有

a:link{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}

设置空白属性

white-space
pre：浏览器显示原文本中所有空格和回车
nowrap：文本全部显示在一行。可以手动创建br换行，但还是尽量避免而去用css控制
normal：正常

引用服务端字体

@font-face{
    font-family:WebFont;
    /*ttf:o,otf:t*/
    src:(xxx.ttf)format("truetype");
    font-weight:normal;
}
div{font-famliy:WebFont;}

若客户端有这个字体

@font-face{
    font-family:MyArial;
    src:local("Arial"),/*客户端字体*/
        url("xxx.otf");/*服务端字体*/
}
div{font-famliy:MyArial;}

修改字体种类而保持尺寸一致

font-size-adjust
aspect=height/字体大小
浏览器实际显示的aspect=（实际使用的aspect/修改前aspect）/当前字体尺寸