图解 CSS (5): font - 字体

font
font-family
font-size
font-weight
font-style
font-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.