【css技术指南笔记】 第四章 字体 文本

通用字体 font-family

• serif 衬线字体，在字符笔画的末端会有装饰线

• san-serif 无衬线字体，笔画末端没有装饰线

• monospace 等宽字体，每个字符的宽带相等

• cursive 草书体或手写体

• fantasy 其他字体，奇形怪状的字体

字体大小 font-size

• CSS3 新增了一个rem（root em），相对单位，与 em 的区别是：rem 是相对于 HTML 的根元素进行字体大小计算的，em 是根据父元素计算

字体样式 font-style

• italic / oblique 斜体，在英文中表示强调

• normal 正常

字体粗细 font-weight

• bold 粗体

• normal 正常

字体变化 font-variant

• normal

• small-caps 小写字母变大写

简写 font

{font:bold italic small-caps .9em helvetical, arial, sana-serif} 粗、斜体、大写 .9em大小 最后指定三个字体

规则：

• 必须声明 font-size 和 font-famliy

• 声明顺便必须如下，大致思想是，首先设定文字的风格、大小，最后是字体

• font-weight  font-style  font-variant 找三个间不分先后

• font-size

• font-family

文本属性

• 文本缩进 {text-indent:1em} //该属性具有遗传性；1em 为字体宽度，字体不同宽度不同，注意：汉字一个为两个字符；可以设置负值

• 字符间距 {letter-spacing:.2em} em 为字体宽度

• 单词间距 {word-spacing:.2em} 调整单词间的距离，对于中、英文来说，都是一样标准：以空格分隔一个单词

• 文本装饰 {text-decoration:none;}

• underline：下划线

• overline：上划线，在文字的上方有条线

• line-through：划去线，文字中间穿过一条线

• blink：给文字添加闪动效果（尝试无效果—_—）

• 文本对齐 {text-align:right;}

• left、right

• center 可以使用这个属性来矩阵固定宽度的图片和元素

• justify 两端对齐，保证两端都有字符，然后平均分布

• 垂直对齐 {vertical-align:60%;}

• 
  

• 行高 {line-height:1.5} 字体大小的1.5倍

• 简写为 {font:1.2em/1.5 helvetica, arial, sans-serif} //字体为1.2em，行高则是1.2em*1.5
  

• 文本转换 {text-transform:none}

• capitalize 每个单词首字母大小 This Is 

• uppercase 全大写

• lowercase 全小写

• 垂直对齐 {vertical-align:60%}，用来实现 H2O 的效果，元素必须为 dispaly:inline

• 默认的有sub(下标)，super(上标)，top(元素的顶部与其他的元旦顶部对齐)，middle(元素中心与其他元素中间对齐)，bottom

• {vertical-align:-.5em} 下标，往下移动.5个字的宽度

• {vertical-align:.5em} 上标，往上移动.5个字的宽度

• {word-wrap:break-word} 在超长单词破坏布局的情况下，讲单词分两行显示（同样适用于长URL）