疯狂H5讲义 - 字体与文本相关属性

1.字体相关属性：

color：控制文字颜色
font-family：设置文字的字体，如果需要设置多个字体，使用逗号隔开
font-size：设置文字的字体大小。该属性支持如下属性值:
    xx-small：绝对字体尺寸，最小字体
    x-small：绝对字体尺寸，较小字体
    small：绝对字体尺寸，小字体
    medium：绝对字体尺寸，正常大小的字体，默认值
    large：绝对字体尺寸，大字体
    x-large：绝对字体尺寸，较大字体
    xx-large：绝对字体尺寸，最大字体
    larger：相对字体尺寸，相对于父组件中的字体进行相对的增大
    smaller：相对字体尺寸，相对于父组件中的字体进行相对的减小
    length：直接设置字体大小，该值可以设置为一个百分比值表示为父组件中的字体大小的百分比，也可以设置为一个数值加长度大卫，比如10px
font-size-adjust：用于控制对不同字体的字体尺寸进行微调，可以设置为none表示不进行任何调整或者一个数值表示调整比例
font-stretch：用于改变文字的横向拉伸，默认值为normal表示不拉伸，还有两个属性值为:narrower表示横向压缩和wider表示横向拉伸
font-style：用于设置文字的倾斜与否。常用属性有:normal/italic/oblique，分别表示文字正常、斜体、倾斜字体
font-weight：用于设置字体是否加粗。lighter/normal/bold/bolder等属性值，也可以自定义具体的数值
text-decoration：用于控制文字的修饰线，none/blink/underline/line-through/overline等，分别对应于无修饰、闪烁、下划线、中划线、上划线等
font-variant：用于设置文字的大写字母的格式，属性值有两个：normal/small-caps，分别表示正常的字体和小型的大写字母字体
text-shadow：用于设置文字是否有阴影效果
text-transform：用于设置文字的大小写，属性值可以是:none/capitalize/uppercase/lowercase,分别对应：不转换，首字母大写，全部大写和全部小写
line-height：用于设置字体的行高，行高定义：字体最低端和字体内部顶端之间的距离，行高为负值时用于实现阴影效果
letter-spacing：用于设置字符之间的间隔，
word-spacing：用于设置单词之间的间隔

2.使用text-shadow属性可以为文字添加阴影效果，该属性的值有两种形式：color xoffset yoffset radius/xoffset yoffset radius color：color指定该阴影的颜色；xoffset指定阴影在横向上的偏移，为负值表示横向下偏移；yoffset指定阴影在纵向上的偏移，为负值表示纵向下偏移；radius指定阴影的模糊半径，该值越大，阴影越模糊

3.CSS3支持的颜色表示方法，有六种:

1.直接用颜色表示
2.用十六进制的颜色值表示
3.用rgb(red,green,blue)函数表示，红绿蓝三原色混合原理
4.用hsl（hue，saturation，lightness）函数表示，分别表示色调、饱和度和亮度
5.用rgba（red,green,blue,alpha）函数表示，新增一个透明度
6.用hsla（hue，saturation，lightness，alpha）函数表示，新增一个透明度

4.文本相关属性汇总:

text-indent：设置段落文本的缩进，可以用于设置文本的首行缩进
text-overflow：控制溢出文本的处理方法，该属性有如下两个属性值:
    clip：如果指定了overflow：hidden，当该元素中文本溢出时，指定只是简单的裁切溢出的文本内容
    elipsis：如果指定了overflow：hidden，当该元素中文本溢出时，指定裁切溢出的文本，并且显示溢出标记...
vertical-align：设置目标元素里内容的垂直对齐方式：
    auto：自动对齐
    baseline：默认值，元素内容与基线对齐
    sub：元素内容与文本下标对齐
    super：元素内容与文本上标对齐
    top：默认值，元素内容与元素的顶端对齐
    middle：默认值，元素内容对齐到元素的中间
    bottom：默认值，元素内容与元素的底端对齐
    length：指定文本内容相对于基线的偏移距离
text-align：设置目标组件中文本的水平对齐方式：
    left：左对齐
    right：右对齐
    center：居中对齐
    justify：两端对齐
direction：设置文本流入的方向，有两个属性值ltr和rtl，该属性类似于元素<bdo dir />
word-break：设置目标组件中文本内容的换行方式：
    normal：默认规则进行换行
    keep-all：只能在半角空格或者连字符出进行换行
    break-all：设置允许在单词之间进行换行
white-space：设置目标组件中文本内容对空格的处理方式：
    normal：默认处理方式
    nowrap：强制在同一行内显示所有文本，知道文本结束或者遇到<br/>元素
word-wrap：设置目标组件中文本内容的换行方式：
    normal：默认规则进行换行
    break-word：设置允许在单词中间进行换行

5.有时候我们使用的字体而客户端并没有安装，因此字体设置将不会在客户端上起作用，CSS3提供了服务器字体定义，如果客户端没有安装这种字体，客户端将会自动下载这种字体:

/*定义服务器字体*/
@font-face{
    /*指定服务器字体的名称*/
    font-family: name;
    /*通过url指定字体文件，format指定字体格式,目前服务器字体只支持两种对应格式:TrueType格式对应于.ttf文件；OpenType格式对应于.otf文件*、
    src: url(url) format(fontformat);
    sRules
}
/*在元素中应用该字体*/
div{
    /*对应服务器字体的font-family属性值*/
    font-family: name;
}

CSS3还提供了一个local用于解决问题：浏览器先检查local所指定的字体是否存在，如果不存在，才使用服务器字体作为替代方案:

@font-face{
    font-family: name;
    src: local("Goudy Stout"),url("Blazed.otf") format("OpenType");
}