Font

像往常一样，新建个页面然后在css文件里设置body标签的属性，刚写个font:;就停住了，细节决定成败，一直都那样写着，何不总结一下呢!?

CSS font 属性

font:font-style font-variant font-weight font-size/line-height font/family

CSS简写指南：http://www.qianduan.net/css-font-shorthand-attribute-handbook.html

css font-style 属性

可能的值
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。

Italic 不是斜体

斜体是oblique。Italic 顾名思义，是意大利体。Italic 是一种书写方式（calligraphy script），而oblique 是一种印刷样式，两者是不同的东西。中学英语习字册交授的书写方式就是意大利体。除了意大利体外，比较流行的书写方式还有法兰西体（就是传说中的花体字，正名是French Script）、哥特体、亚伯拉罕体等等。

很多考究的字体都会为意大利体定制一套特殊的字体，而不是简单的显示成斜体。比如下面的图片里，三行文字都是Georgia字体。第一行普通；第二行是oblique，也就是斜体；第三行才是真正的italic意大利体。

大家仔细看第三行的a, l, i, e 等字母——很明显的看出区别了吧。实际上，Georgia Italic 和 Georgia 在系统内是两个不同的字体文件。当我们指定 font-style: italic 的时候，系统就会自动搜寻是不是存在Georgia Italic这个字体，并尝试使用这个字体来显示文字内容。

按理说当我们用 font-style: oblique 指定字体样式时，浏览器不应该去寻找Georgia Italic这个字体，而直接将Georgia字体倾斜显示，所以理论上应该得到图中第二行文字的效果。可惜，连W3C在CSS规范中，自己的参考实现也说是“如果UA不能正确显示italic 和oblique, 可以使用italic来代替oblique显示”，所以几乎没有浏览器实现区分italic 和oblique。哪怕你设置的font-style是oblique, 你也会发现，浏览器显示的也还是italic 。

css font-variant 属性

可能的值

值	描述
normal	默认值。浏览器会显示一个标准的字体。
small-caps	浏览器会显示小型大写字母的字体。
inherit	规定应该从父元素继承 font-variant 属性的值。

css font-weight 属性

取值：

normal：正常的字体。相当于number为400
bold：粗体。相当于number为700。
bolder：特粗体。也相当于strong和b对象的作用
lighter：细体
<integer>：用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
bold,bolder在浏览器中支持得不是很好，两者貌似没啥区别。

css font-size 属性

css中强大的em:http://www.w3cplus.com/css/px-to-em

曾经:http://dancewithnet.com/2008/06/17/it-is-time-to-discard-font-size-adjustments/

CSS Font-Size: em vs. px vs. pt vs. percent:http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

line-height 属性

line-height(normal{默认，设置合理}，number{设置数字，此数字会与当前的字体尺寸相乘来设置行间距}，length{设置固定的行间距}，%{基于当前字体尺寸的百分比行间距【line-height 与 font-size 的计算值之差（在 CSS 中成为"行间距"）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。】}

深入理解css中的行高：http://www.cnblogs.com/rainman/archive/2011/08/05/2128068.html

Rain Man:http://www.cnblogs.com/rainman/category/170292.html

豆豆猫的窝:http://www.ddcat.net/blog/?p=227

蜗爱css:http://www.woaicss.com/article/div/line-height.htm

杂谈 height, line-height, display, vertical-align:http://www.cnblogs.com/zhujl/archive/2012/08/25/2654288.html

IE6行高(line-height)失效:http://www.aiubug.com/?p=491

css行高line-height的一些深入理解及应用:http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/

http://my.oschina.net/lyzg/blog/99577