CSS字体

字体系列

CSS定义了5中通用字体系列

  1. Serif

  2. Sans-serif

  3. Monospace,等宽字体

  4. Cursive,手写体

  5. Fantasy

    理论上,用户安装的任何字体系列都会落入到上述通用系列之中。

    我是serif字体

    我是sans-serif字体

    我是monospace字体

    我是cursive字体

    我是Fantasy字体

五种通用字体在MacChrome中的显示

使用font-family来指定字体。

例如: h1 {font-famliy: Georgia, serif;} 如果Georgia字体不可用,则会使用另外一种serif字体。

建议在所有的font-famliy中都提供一个通用的字体系列

字体加粗

font-weight: normal(初始值) | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit(可以继承)

  1. font-weight 取值为数字

对于同一个字体会有很多不同的变形,这些变形使用相同的基本字体,但是每个变形都有不同的加粗。例如:对于字体Zurich而言, Zurich Bold, Zurich Black, Zurich UltraBlack, Zurich Light和Zurich Regular都是其不同的粗细的变形。

字体定义了9级加粗度,分别为100~900,100最细,900最粗。

这些数字都有某个常用的变形名等价,400定义为normal,700对于于bold。

可能有多个数字,对应了同一个变形。

下表中展示了Zurich的不同变形对应的数字

字体 指定的关键字 指定的数字
Zurich Light 100,200,300
Zurich Regular normal 400
Zurich Medium 500
Zurich Bold bold 600,700
Zurich Black 800
Zurich UltraBlack 900

font-family: 'Zurich Light'

font-famly: 'Zurich'; font-weight: 100

font-famly: 'Zurich'; font-weight: 200

font-famly: 'Zurich'; font-weight: 300

以上四条规则使用的字体相同。

  1. font-weight 取值为border或者lighter

    如果将一个元素的加粗设置为border,浏览器会首先确定其父元素的font-weight的值,然后选择下一个加粗级别中最小的加粗值,若不存在该字体,则设置为下一个更大的数字,直到该数字为900。

    以上面Zurich字体为例:

    p { font-weight: normal; } //400
    p em { font-weight: border; } // 500
    
    p { font-weight: light; } //100
    p em { font-weight: border; } // 400,如果该字体Lighter后面的字体都不存在,则改值为 200
    

    lighter的做法一致,只不过会导致加粗度下移而不是上移。

字体大小

font-size: xx-small | x-small | small | medium(初始值) | large | x-large | xx-large | smaller | lager | | (根据父元素的大小来计算)| inherit(可继承)

font-size的作用是为给定字体的em框提供一个大小,而不能保证实际字符就是这种大小。实际字体大小之间的具体关系是由字体的设计者来确定的。

  1. 绝对大小

    font-size有7个绝对大小的关键字 xx-small | x-small | small | medium(初始值) | large | x-large | xx-large ,但是这些关键字并没有明确的定义,而是相对定义的。根据css1规范,一个绝对大小与下一个绝对大小之间的差别(缩放因子)应当是向上1.5,向下0.66。但是不同的浏览器使用的缩放因子可能不同。

    假设medium等于16px,对于不同的缩放因子,得到下表中不同的绝对大小。

    关键字 缩放:1.5 缩放:1.2
    xx-small 5px 9px
    x-small 7px 11px
    small 11px 13px
    medium 16px 16px
    large 24px 19px
    x-large 36px 23px
    xx-large 54px 28px
  2. 相对大小

    larger和smaller很简单:使元素的大小相对于其父元素的大小在绝对大小梯度上上移或下移,使用计算绝对大小的缩放因子。

    p { font-size: medium} // 16px

    p em { font-size: larger} // 16*1.2

  3. 百分数

    百分数总是根据从父元素继承的大小来计算。

  4. 继承

    font-size 是可以继承的,但是继承的是计算值而不是百分数。

    例如:

    p { font-size: 12px; }
    p em { font-size: 120%; } // 12*1.2 ≈ 14px(浏览器会对像素大小进行取整)
    p em strong { font-size: 135%; } // 14 * 1.35 ≈ 19px (而非 12*1.2*1.35)
    

字体风格

font-style: italic(斜体) | oblique(倾斜) | normal(正常,初始值) | inherit(可继承)

字体变形

font-variant: small-caps(小型大写字母文本) | normal(初始值) | inherit(可继承)

拉伸和调整字体

font-stretch: 让一种字体的字符更胖或者更瘦

font-size-ajust: 当所用字体非创作人员首选时,仍然保证可以辨识

font-face

使用font-face可以在文档中下载一个远程字体来使用。

@font-face {
  font-family: 'MyFont';
  src: url(http://www.myfont.com/myfont.ps)
}

你可能感兴趣的:(CSS字体)