CSS样式_字体

字体

CSS字体系列

• 在CSS中，有两种不同类型的字体系列名称：
• 通用字体系列，拥有相似外观的字体系统组合，一共有5种：

Serif 字体
Sans-serif 字体
Monospace 字体
Cursive 字体
Fantasy 字体

• 特定字体系列， 具体的字体系列（比如 “Times” 或 “Courier”）

指定字体系列 [font-family]

• font-family可以设置多个值，如果浏览器不支持第一个字体，则会尝试下一个。强烈推荐使用一个通用字体系列名作为后路。如：

p.serif     { font-family:"Times New Roman",Georgia,Serif } <!-- 如果字体名称中有空格、#、$，请使用引号包含起来 -->
p.sansserif { font-family:Arial,Verdana,Sans-serif        }

字体风格 [font-style]

• 该属性有4个值：normal(默认), italic(斜体), oblique(倾斜), inherit

p.normal  { font-style:normal; }
p.italic  { font-style:italic; }
p.oblique { font-style:oblique;}

字体变形 [font-variant]

• 该属性有3个值：normal(默认), small-caps(小型大写字母，比normal的字体要小), inherit

p.normal { font-variant: normal     }
p.small  { font-variant: small-caps }

字体粗细 [font-weight]

• 设置文本的粗细，取值可以有：

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100 200 300 … 900	定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

p.normal  { font-weight: normal}
p.thick   { font-weight: bold  }
p.thicker { font-weight: 900   }

字体大小 [font-size]

• 可使用绝对值和相对值

名称	特点
绝对值	将文本设置为指定的大小 不允许用户在所有浏览器中改变文本大小（不利于可用性） 绝对大小在确定了输出的物理尺寸时很有用
相对值	相对于周围的元素来设置大小 允许用户在浏览器改变文本大小

• 设置字体的大小，取值可以有：

值	描述
xx-small x-small small medium large x-large xx-large	把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。 默认值：medium。
smaller	把 font-size 设置为比父元素更小的尺寸。
larger	把 font-size 设置为比父元素更大的尺寸。
length(px, em)	把 font-size 设置为一个固定的值。
%	把 font-size 设置为基于父元素的一个百分比值。
inherit	规定应该从父元素继承字体尺寸。

• 为避免在IE中无法调整字体的大小，请使用em单位代替px。并且设置父元素(body)的font-size值，如下所示：

body { font-size:100%;   } <!-- 设置父元素的基准值 -->
h1   { font-size:3.75em; } <!-- 相对于父元素调整 -->
h2   { font-size:2.5em;  }
p    { font-size:0.875em;}

更多请参考：W3School