摘要：當(dāng)字體系列名稱為英文且有空格或?yàn)橹形臅r(shí)，請為該名稱加引號。絕對值，默認(rèn)值為，字體大小都為固定值。當(dāng)然該屬性只是針對英文而言。七簡寫屬性簡寫屬性在一個(gè)聲明中設(shè)置所有字體屬性。八字體顏色屬性規(guī)定文本的顏色。

一、前言

 　　CSS字體屬性可以定義文本的字體系列、大小、加粗、顏色、風(fēng)格（如斜體）和變形（如小型大寫字母）。

CSS的字體屬性：

下面我們開始逐步學(xué)習(xí)CSS中的字體樣式。

二、字體系列：font-family

　　在CSS中有兩種不同類型的字體系列名稱：通用字體系列，特定字體系列。其中通用字體系列是多個(gè)擁有相似外觀字體系列的組合；特定字體系列是具體的字體系列。

　　為什么要稱為系列呢？

我們所認(rèn)為的“字體”可能有許多字體變形組成，分別用來描述粗體、斜體文本，等等。例如，你可能已經(jīng)對字體 Times 很熟悉。不過，Times 實(shí)際上是多種變形的一個(gè)組合，包括 TimesRegular、TimesBold、TimesItalic、TimesOblique、TimesBoldItalic、TimesBoldOblique，等等。Times 的每種變形都是一個(gè)具體的字體風(fēng)格（font face），而我們通常認(rèn)為的 Times 是所有這些變形字體的一個(gè)組合。換句話說，Times 實(shí)際上是一個(gè)字體系列（font family），而不只是單個(gè)的字體。——From W3School

 　　CSS還定義了五種通用字體系列：Serif、Sans-serif、Monospace、Cursive、Fantasy。它們的詳細(xì)介紹請參考W3School和CSS Web安全字體，下面開始介紹font-family屬性。

 font-family使用方式：

<p style="font-family: Times, TimesNR, New Century Schoolbook, Georgia,
New York, serif;">test fontp>

應(yīng)當(dāng)注意的是：

1. 可以一次給font-family添加多個(gè)字體系列，瀏覽器會使用第一個(gè)已安裝的可用字體，如果所列字體都不可用，瀏覽器將用其默認(rèn)字體。
2. 當(dāng)字體系列名稱為英文且有空格或?yàn)橹形臅r(shí)，請為該名稱加引號。
3. 字體間用 , 隔開

建議在所有 font-family 規(guī)則最后都提供一個(gè)通用字體系列。這樣就提供了一條后路，在用戶代理無法提供與規(guī)則匹配的特定字體時(shí)，就可以選擇一個(gè)候選字體。

三、字體大?。篺ont-size

　　 font-size屬性值可以是絕對值或相對值，并且字體大小可繼承。

　　 絕對值會將文本設(shè)定為指定大小，并且不允許用戶通過瀏覽器來改變字體大小，絕對大小在確定了輸出的物理尺寸時(shí)很有用；相對大小是相對于周圍元素來設(shè)置大小，并且允許用戶通過瀏覽器調(diào)整字體大小。如果沒有設(shè)置字體大小，普通文本（比如段落）的默認(rèn)大小是 16 像素 (16px=1em)。

　　絕對值：xx-small、x-small、small、medium、large、x-large、xx-large，默認(rèn)值為medium，字體大小都為固定值。

　　相對值：smaller、larger、em、%，其中px是相對相對顯示器分辨率而言的。

使用像素設(shè)置字體大小

<p style="font-size: 30px;">test fontp>

使用em或%設(shè)置字體的大小

<p style="font-size: 16px;">
    16px的父元素
    <sapn style="font-size: 2em;">2em的子元素sapn>
    <sapn style="font-size: 200%;">200%的子元素sapn>
    <span style="font-size: 32px;">32px的子元素span>
p>

 我們發(fā)現(xiàn)，em和%是相對于父元素字體大小的倍數(shù)進(jìn)行設(shè)置的，倍數(shù)可以是整數(shù)也可是小數(shù)。

四、字體粗細(xì)：font-weight

<p>
    默認(rèn)為normal的父元素
    <span style="font-weight: lighter;">lighter子元素span>
    <sapn style="font-weight: bold;">bold子元素sapn>
    <sapn style="font-weight: bolder;">bolder的子元素sapn>
p>

五、字體風(fēng)格：font-style

　　font-style 屬性最常用于規(guī)定斜體文本，該屬性有三個(gè)值：normal（正常）、italic（斜體）、oblique（傾斜）。其中，斜體（italic）是一種簡單的字體風(fēng)格，對每個(gè)字母的結(jié)構(gòu)有一些小改動(dòng)，來反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的一個(gè)傾斜版本。不過通常情況下，它們看上去并無差別。

<span style="font-style: normal;">正常span>
<sapn style="font-style: italic;">斜體sapn>
<sapn style="font-style: oblique;">傾斜sapn>

六、字體變形：font-variant

　　font-variant 屬性可以設(shè)定小型大寫字母。小型大寫字母不是一般的大寫字母，也不是小寫字母，這種字母采用不同大小的大寫字母。當(dāng)然該屬性只是針對英文而言。它的兩個(gè)屬性值為：normal、small-caps。

<span style="font-variant: normal;">normalspan>
<sapn style="font-variant: small-caps;">small-capssapn>

我們發(fā)現(xiàn)設(shè)置為small-caps后小寫字母變成了大寫字母，但字體變小了，這就是為什么稱為：小型大寫字母。

七、簡寫屬性：font

　　font 簡寫屬性在一個(gè)聲明中設(shè)置所有字體屬性。此屬性也有第六個(gè)值："line-height"，可設(shè)置行間距。一般設(shè)置順序?yàn)椋篺ont-style，font-variant，font-weight，font-size/line-height，font-family，前三個(gè)屬性順序可變，后兩個(gè)順序不可變。應(yīng)當(dāng)注意的是，使用該屬性時(shí)至少需要同時(shí)font-size和font-family，并且順序不能顛倒。font-size和line-height之間用 "/" 鏈接。

<span style="font: italic bold 20px/30px times,serif;">test fontspan>
、

八、字體顏色：color

　　color 屬性規(guī)定文本的顏色。這個(gè)屬性設(shè)置了一個(gè)元素的前景色（在 HTML 表現(xiàn)中，就是元素文本的顏色）；光柵圖像不受 color 影響。這個(gè)顏色還會應(yīng)用到元素的所有邊框，除非被 border-color 或另外某個(gè)邊框顏色屬性覆蓋。應(yīng)當(dāng)注意的是，該屬性要和font屬性分開寫，不要和其它字體樣式一樣寫在font里面。

<span style="font: italic bold 20px/30px times,serif; color: rgb(51,255,255);">test fontspan>

九、最后

　　 參考學(xué)習(xí)資料：W3School。

　 　所學(xué)不深，如有錯(cuò)誤或不足之處，還望您能留言指出，十分感謝！