圖解 CSS (5): font – 字型

fontfont-familyfont-sizefont-weightfont-stylefont-variant另外 font-size-adjust 和 font-stretch 從 CSS 2.1 已廢棄, 就不再學習了.

font-family(指定字型):

如果字型名包含空格或其他特殊符號, 應使用引號(雙引號或單引號):

可以同時指定多個字型(逗號分割), 前者優先、缺失後補、再缺使用預設.

font-size(字型大小), 首先有幾個常數值: xx-small、x-small、small、medium、large、x-large、xx-large:

inherit(繼承)、smaller(縮小)、larger(放大):

自訂大小(使用 px 等單位)和百分比:

font-weight(粗體設定): 100-900、normal(預設)、bold(粗體)、bolder(再粗點)、lighter(再細點).

那麼多參數, 想得挺美, 但字型大都不支援那麼細緻, 其實一個 bold 也就夠了.

font-style(斜體設定): normal(預設)、italic(斜體)、oblique(斜體).

italic 和 oblique 本來是有區別的, 但字型大都不支援, 即使字型能支援瀏覽器也不一定支援, 都當斜體就是了.

font-variant: normal(預設)、small-caps(把小寫字母顯示為小型大寫字母):

可以用 font 綜合設定上面這些屬性, 一般順序是:
font-style、font-variant、font-weight、font-size/line-height、font-family.

可省略, 順序也有靈活行, 不過好像 font-size 與 font-family 只能是這個順序;
各元素用空格隔開, 字型(若多個)用逗號隔開; 比較方便地是: 用這種方法在設定字型大小時還可同時指定行高(用/分割).

既然這樣, 我們可以用:font: italic;     代替 font-style: italic;font: small-caps; 代替 font-variant: small-caps;font: bold;       代替 font-weight: bold;font: 16px;       代替 font-size: 16px;font: 16px/32px;  代替 font-size: 16px/32px;但遺憾的是: 不能用 font: Arial; 代替 font-family: Arial; (用 IE 測試)

font 還可以直接套用瀏覽器上已知對象的字型屬性, 譬如:
caption、small-caption、menu、icon、status-bar、message-box.