CSS字体及文本样式

字体和文本

字体是“文字的不同体式”或者“字的形体结构”。对于英文而言，每种字体都是由一组具有独特样式的字母、数字和符号组成的

字体属性主要描述一类字体的大小和外观。比如，使用什么字体族（是Times，还是Helvitica），多大字号，粗体还是斜体。文本属性描述对文本的处理方式。比如，行高或者字符间距多大，有没有下划线和缩进等

1. 网页中字体来源

1. 用户机器中安装的字体
2. 保存在第三方网站上的字体。最常见的是Typekit 和Google，可以使用link 标签把它们链接到你的页面上
3. 保存在你的Web 服务器上的字体。这些字体可以使用@font-face 规则随网页一起发送给浏览器

2. 通用的字体类
serif　　　　　　衬线字体，在每个字符笔画的末端会有一些装饰线
sans-serif　　　无衬线字体，字符笔画的末端没有装饰线
monospace　　 等宽字体，顾名思义，就是每个字符的宽度相等（也称代码体）
cursive　　　　  草书体或手写体
fantasy　　　　不能归入其他类别的字体（一般都是奇形怪状的字体）

每一类字体可以分成不同的字体族（font family），比如Times 和Helvetica。而字体族中又可以包含不同的字型（font face），反映了相应字体族基本设计的不同变化

3. 常用的字体栈

Verdana 的后备用Tahoma 最好，因它们的“x 高度”相同。

verdana, tahoma, sans-serif

如果想设定一个相对轻爽一点的无衬线字体，可以使用这个字体栈

helvetica, arial, sans-serif

字体大小

1. 绝对字体大小

 

使用像素、派卡（pica）或英寸设定字体大小很简单，它们是绝对单位，因此设定多大就多大，与祖先元素的字体大小无关

设定绝对字体大小时，也可以使用关键字值，比如x-small、medium、x-large(http://css-discuss.incutio.com/wiki/Using_Keywords)

 

2. 相对字体大小

使用百分比、em 或rem（根元素的字体大小）设定字体大小要复杂一些。如果你给某个元素设定了相对字体大小，则该元素的字体大小要相对于最近的“被设定过字体大小的”祖先元素来确定。

页面基准大小为16px, 如果你想使用em，但又需要设定具体的像素大小，可以把body 的font-size 设定为62.5%。这样，就等于把基准大小从16 像素改为10 像素（16×62.5%=10）

body{ font-size: 62.5%}

CSS3 新增了一个相对单位rem（root em，根em），这个单位引起了广泛关注。这个单位与em 有什么区别呢？区别在于使用rem 为元素设定字体大小时，仍然是相对大小，但相对的只是HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8 及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem 设定的字体大小

小型大写字母

h3 {font-variant:small-caps;}

Welcome to This Session

 经常将small-caps 用于::first-line 伪元素

简写字体属性

p {font: bold italic small-caps .9em helvetica, arial, sans-serif;}
div#intro {font:1.2em/1.4 helvetica, arial, sans-serif;}

font 属性是一个简写形式，通过它只要一条CSS 声明就可以设定所有字体属性。不过，使用这个简写形式要遵守两条规则，否则浏览器无法正确解释声明的值。
规则一：必须声明font-size 和font-family 的值。
规则二：所有值必须按如下顺序声明。
1. font-weight、font-style、font-variant 不分先后；
2. 然后是font-size；
3. 最后是font-family。
实际上，在设定font-size 属性的同时，可以顺便设定line-height（行高）值。也就是说，字体大小和行高的值可以写在一块，比如12px/1.5

行高  http://www.ituring.com.cn/article/18076

CSS 中的行高平均分布在一行文本的上方和下方。举个例子，如果字体大小是12 像素，行高是20 像素，则浏览器会在文本上方和下方各加4 像素的空白，以凑足20像素的行高。
对于类似标题的一行文本来说，line-height 增加的空白就像外边距一样，较大的标题（如h1 和h2）往往有较大的默认行高。

这一点应该记住，因为有时候即使把外边距和内边距全去掉，标题上下仍然会有空白。如果想把这些空白也去掉，那就只能把文本的行高设定为比字体高度（就是字体大小）还要小，比如设定为小于1 的值

垂直对齐

vertical-align 以基线为参照上下移动文本，但这个属性只影响行内元素。如果你想在垂直方向上对齐块级元素，必须把其display 属性设定为inline

p.custom sub {font-size:60%; vertical-align:-.4em;}
p.custom sup {font-size:65%; vertical-align:.65em;}
p.customsmall {font-size:.8em; vertical-align:1em;}

 

在网页中嵌入字体的第二种方式是使用@font-face 规则，前提是可以从你的网站或第三方Web 服务器下载到相应的字体。以这种方式提供的字体，会在使用该字体的页面第一次加载时被浏览器下载并缓存起来，以后就不用下载了

使用@font-face 的一个问题是不同浏览器要求的字体格式不一样。比如，Firefox、Webkit 核心的浏览器（Safari 和Chrome），以及iOS 4.1 版之后的移动Safari 使用OTF（OpenType）或TTF（TrueType）字体。Internet Explorer 使用EOT（EmbeddedOpenType）。另外，iOS 4.1 之前版本中的移动Safari 以及其他浏览器使用SVG（Scalable Vector Graphics）格式

 http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/

http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

 首字下沉效果

h1 + p::first-letter {
font-family:times, serif;
font-size: 90px;
float:left;
line-height:.65; /*我们把line-height 设定为小于1 的值，以便元素盒子紧紧包住首字*/
border:1px solid;
}