前端笔记八，字体与文本相关属性

font:控制字体属性，是包括所有以font-开头的复合属性，如font-size,font-family,font-style,font-variant,font-weight,line-height。不建议直接使用
color:控制文字颜色，可以使用颜色名，十六进制的颜色值，rgb(r,g,b)，rgba(r,g,b,a)，hsl()函数，hsla()函数
font-family:设置文字字体，可选值有
　　xx-small：最小字体
　　x-small：较小字体
　　small：小字体
　　medium：正常字体大小，默认值
　　large：大字体
　　x-large：较大字体
　　xx-large：最大字体
　　larger：相对于父组件中的字体进行相对增大
　　smaller：相对于父组件中的字体进行相对减小
　　length：直接设置字体大小，可以是百分比，表示相对于父组件字体大小的百分比，也可以是Xpt，Xpx
font-size-adjust：用于对不同的字体的尺寸进行微调
　　可是制定none或者一个数值表示调整比例
font-stretch：改变文字横向的拉伸
　　可选值：narrower,wider,normal(默认)
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：设置单词之间的间隔

添加阴影：
text-shadow: color xoffset offset length 或者 text-shadow:xoffset yoffset radius color
　　其中
　　color：设置该阴影的颜色
　　xoffset：阴影在横向上的偏移
　　yoffset：阴影在纵向上的偏移
　　radius：阴影的模糊半径，模糊半径越大看起来越模糊
添加多个阴影：在text-shadow中多设置几组阴影，每组阴影之间使用逗号隔开

文本相关属性：
text-indent：用于设置段落文本的缩进
text-overflow：控制溢出文本的处理方法,可选值clip溢出的文本进行裁切，ellipsis裁切溢出的文本，并显示溢出标记(…)，这两个属性需要有overflow:hidden;white-space:nowrap
vertical-align：设置目标元素里内容的垂直对齐方式
　　auto:自动对齐
　　baseline:默认值，与基线对齐
　　sub:将元素内容与文本下标对齐
　　super:将元素内容与文本上下标对齐
　　top:顶端对齐
　　middle:中间对齐
　　bottom:底端对齐
　　length:指定文本内容相对于基线的偏移距离，可使用百分比，也可使用绝对距离
　　text-align:设置文本的水平对齐方式
　　left:左对齐
　　right:右对齐
　　center:居中对齐
　　justify:两端对齐
　　direction:设置文本流入方向
　　ltr:从左向右
　　rtl:从右向左
word-break:设置文本内容换行方式
　　normal:默认规则进行换行
　　keep-all:只能在半角空格或连字符处换行
　　break-all:允许在单词中间换行
white-space:设置目标组件中文本内容对空格的处理方式
　　normal:默认处理方式，遇到容器边界会转到下一行
　　nowrap:在同一行里显示所有文本，直到文本结束或者遇到换行元素
word-wrap:设置文本内容的换行方式
　　normal:默认规则进行换行
　　break-word:允许在单词中间进行换行 (URL地址通常使用这个)

word-break与word-wrap:
　　前者设置为break-all可以使组件内每一行文本的最后一个单词自动换行
　　后者会尽量使长单词，URL地址不换行，只有一行不足以显示完全才换行

使用服务器字体：必须在客户端已经安装了这种字体，否则字体设置在客户端不起作用
　　1、下载需要使用的字体文件*.ttf
　　2、使用@font-face定义服务器字体
　　3、通过font-family属性指定使用服务器字体