CSS学习之“字体属性”

使用一般字体系列

font-family

允许值：[[<系列名> | <一般系列>], |*[<系列名> | <一般系列>]

初始值：与用户代理有关

可否继承：是

适用于：所有元素

例，如想使每段的字体为“sans-serif”字体，则：

p { font-family:sans-serif;}

如想让所有的H1字体为Garamond。则规则如下：

h1{ font-family:Garamond;}

这样所有的H1字体就为Garamond了，但是如果用户没有Garamond 字体怎么办？当然他不会忽略这条规则，通过将具体的字体名同一般字体系列组合，文档将能够尽量以接近制作者的方式显示。如下面这条规则：

H1 { font-family:Garamond,serif;}

这条规则就告诉我们，当用户代理找不到Garamond字体时，则会选择另外一种serif字体。

 

---

 

字体加粗

font-weight

允许值：normal | bold | bolder | ligter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

初始值：normal

可否继承：是

适用于：所有元素

例：H1 {font-family:times;font-weight:bold;}

<h1>这里是字体font-weight:bold的效果。</h1>

则显示效果如下：

This is font-weight:bold的效果。

可以看出字体变粗了，和<b>标签没有什么两样。。

 

---

 

字体尺寸

font-size

允许值：xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <长度> | <百分比>

初始值：medium

可否继承：是

适用于：所有元素

注意百分比是指相对于父元素的字体尺寸的百分比。

同font-weight关键字bolder和lighter类似，font-size属性也有相对尺寸的关键字值，称为larger和smaller。这些关健字使font-size的计算值在某个绝对值级别上下移动。

---

 

字体样式

font-style

允许值：italic | oblique | normal

初始值：normal

可否继承：是

适用于：所有元素

font-style的缺省值为normal，它指代“直立”文本，或许可以描述为“非斜体的或非倾斜的文本”。

例P.1 {font-style:normal;}  P.2{font-style:italic;}  P.3 {font-style:bolique;}

<p class="1">这是font-style为normal的效果。</p>

<p class="2">这是font-sytle为italic的效果</p>

<p class="3">这是font-style为oblique的效果</p>

效果如下：

这是font-style为normal的效果。

这是font-sytle为italic的效果。

this is font-style为oblique。

---

 

字体变形

font-variant

允许值：small-caps | normal

初始值：normal

可否继承：是

适用于：所有元素

例：H1 {font-variant:small-caps;"}   p { font-variant:normal;"}

<h1>My name is Qing Qing Hai Shui.</h1>

<p>My name is Qing Qing Hai Shui</p>

效果如下：

My Name is Qing Qing Hai Shui.

My Name is Qing Qing Hai Shui.

---

 

使用缩略方式字体属性

font

允许值：[<字体风格>|| <字体变形> || <字体加粗>]?<字体尺寸> [/<行高> ]? <字体系列>

初始值：参见各个独立的属性

可否继承：是

适用于：所有元素

 如：H1 {font: italic 900 small-caps 30px Verdana, Helvetica,Arial,Times}

前三种独立属性可以相互更换位值，但最后两个值的应用非常严格，不然的话浏览器将会忽略整个声明。

另外font属性中也可以使用行高，行高的加入方式为：将其附加在字体尺寸的值后，以正斜杠（/）分隔：

H2 {font:bold italic 200%/1.2 Verdana,Helvetica,Arial,Times;}

这条规则设置所有的H2元素为粗体和斜体，使用非衬线字体系列的某种字体，字体尺寸为24px，而且行高为30px。