第五章 字体

第五章 字体

1.font-family 字体系列
font-family 不是简单的一种字体，而是一类字体多种变形的组合。
比如Times字体，就包括TimesRegular TimesBold TimesItalic TimesOblique TimesBoldItalic 和 TimesBoldOblique

a.除Times Verdana Helvetica Aril这些特定的字体外，还有5种通用的字体

Serif：包括Times Georgia 和 New Centuray Schoolbook
成正比例：小写i和小写m的宽度根据自身情况不一样
有上下短线：笔符末端有装饰，即l的顶部和底部有短线，A两“腿”有短线

Sans-serif：包括Helvetica Geneva Verdara Arial和Univers
成正比例 无短线

Monospace：包括Courier, Courier New, Andale Mono
不成正比例：所有字母小写时宽度一样
有可能有上下短线

Cursive：包括Zapf Chancery, Author 和Comic Sans
用于模仿手写字体，由大曲线和Serif中没有的短线装饰（一般都比较夸张）


Fantasy： 包括Western, Wookblock, Klingon
无法用某种特性归类

b.字体是否能在浏览器中正确显示，取决于浏览器是否安装该字体。
为减小差异性，可使用多个特定字体，最后使用一个通用字体，比如：
h1{font-family: Times, Georgia,Serif;}
如果没有Times，使用Georgia，如果再没有Georgia，就使用浏览器中Serif的任何一种变体。

c.引号
如下情况应使用引号:
1.字体名有特殊符号："karrank%"
2.字体名有空格： "New Century Schoolbook"
3.与关键字冲突： "cursive"

2.font-weight
值：normal bold bolder lighter 100 200 300 400 500 600 700 800 900 inherit
默认值：normal
继承性：有
适用范围：所有元素
说明：加粗字体，实际上是使用了该字体的加粗变形，比如Times字体加粗，实际上是使用了TimesBold

a.加粗如何作用
将字体分为9个梯度100-900，关键字normal和bold分别对应数值400和700，其它关键字无对应。
如果字体变形没有这9种类：
如果未指定500，则与400相同
如果未指定300，则为之指定比400细的字体，如果400也没有，则按400计算（normal）。这同样适用于100和200未指定的情况。
如果未指定600，则为之指定比400粗的字体，如果400也没有，则按500计算。这同样适用于700-900.

b.lighter和bolder
以100-300，400-500，600-700为3个梯度区间，想对于父元素上移或下移动，可能实际数值变化，但显示不变。


3.font-size
值：<length> <percentage> xx-smalll x-smalll small medium large x-large xx-large
默认值：medium
适用范围：所有元素
继承性：有
说明：a.无line-height属性时，字体大小基本上与该元素em框大小尺寸相同。
b.使用关键字为值时，相对于父元素的缩放因子：CSS2.1向上1.5 向下0.66，CSS2为1.0-1.2
c.不同于加粗，字体大小可想对于父元素无限缩放
d.使用百分数其实质同使用关键字相同，只是可以得到更高的控制精度。不过，若有小数，有的浏览器会自动取整。

4.font-style
值： normal italic oblique inherit
初始值：normal
适用范围：所有元素
继承性：有
说明：如果使用italic，某个字体系列又没有italic变形，就会自动使用oblique变形（如果有），反之不行。

5.font-variant
值：small-caps normal inherit
初始值：normal
使用范围：所有元素
继承性：有
说明：small-caps，如果本来就是大写字母，则使用更大的大写字母，如果是小写字母，则使用小型的大写字母

6.font
值：(font-style font-weight font-variant) (font-size/line-height font-family)
前一组顺序任意且可省略部分或全部，后一组必须放在后面，且不可省略（line-height可省略），顺序也必须保证
初始值：normal(全部）
使用范围：全部元素
继承性：有

7.字体下载
@font-face {font-family:"自己命名"; src: url(...)
说明：由于有资源下载，会消耗性能，可能影响显示。