CSS3学习笔记-字体和文字

字体

字体族font-family

通常需要给处字体栈以适应不同机器间的适配，多单词字体需要用引号

body{
  font-family:"trebuchet ms", tahoma, sans-serif;  
}

serif和sans-serif是最保险的方法

字体大小

设置font-size:62.5% 1em=10px

em单位的相对大小会逐层复合

rem 相对于根元素的字体大小，不支持ie8极其以下的浏览器

字体样式

font-style:italic normal oblique

html中可以直接使用<em>标签做到italic斜体的效果，斜体在英文中表示强调

字体粗细

font-weight 主要bold 和normal html中可以使用<strong>标签

字体变化

font-variant: small-caps 和normal small-caps用来将字母转换为小型大写字母

简写

注意：必须声明font-size和font-family。且声明时其他属性不分先后，font-size倒二，font-family最后声明

在设置字体大小时，可以顺便设置行高，如12px/1.5

word-wrap

normal | break-word 将内容在边界内换行

word-break

normal | break-all（中断单词） | keep-all（保留单词）

white-space

normal（无视空白符）| pre（保留空白符） | nowrap （文本不会换行，直到碰到<br/>标签）| pre-line （合并空白符）| pre-wrap （保留空白符，正常换行）

文本属性

文本缩进text-indent 

注：子元素文本会继承父元素的文本缩进。文本元素只作用于文本内容，不作用于包裹文本元素的盒子。

在设定缩进和外边距时要使用em,以便用户改变字体大小时，它们能等比变化

字符间距letter-spacing

正值增大，负值缩小，缩小标题的字符间距能够让网页显得更专业

单词间距word-spacing

文本装饰text-decoration

line-height行高，修改默认行高的快捷属性就是在font中应用：

div#intro {font:1.2em/1.4 helvetica, arial, sans-serif;}

文本转换text-transform

normal uppercase lowercase capitalize(首字母大写)

text-overflow

clip | ellipsis文本溢出显示省略标记

text-overflow要在一定的高度范围内配合overflow:hidden才能生效

.text{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

垂直对齐vertical-align

sub super top middle bottom 

以基线为参照上下移动文本，只影响行内元素。注：如果想影响块级元素，需使用Inline或Inline-block。

常用于文字上标及下标，脚注等，html标签有上标<sup>和下标<sub>，重新设置font-size和vertical-align会达到更好的效果

Web字体@font-face

（1）@font-face 中的font-family仅用于元素中font-family的引用

（2）应用多个字体就启用多个@font-face规则

（3）src属性会依次获取字体的来源

（4）可以使用字体图标

 在::before和::after的content的元素中引用html实体，需要将十六进制的改写为\201C这样的形式

html5 的<blockquote>用于表示被引用的文本，<quote>用于将文本的开头和末尾加上双引号