bb电子秦皇秘宝

書名：精通HTML5+CSS3+JavaScript網頁設計（視頻教學版）（第2版）
作者名：王英英
本章字數： 2254字
更新時間： 2019-12-09 14:24:03

7.1 字體屬性

一個雜亂無序、堆砌而成的網頁會使人產生枯燥無味、望而止步的感覺，而一個美觀大方的網頁會讓人有美輪美奐、流連忘返的感覺。這美觀大方的效果，都是使用CSS字體樣式來設置的。通過對本節內容的學習，相信讀者可以設計出令人流連忘返的網頁。

7.1.1 字體font-family

font-family屬性用于指定文字字體類型，例如宋體、黑體、隸書、Times New Roman等，即在網頁中展示字體不同的形狀，具體的語法格式如下所示。

     {font-family:name}
     {font-family:cursive|fantasy|monospace|serif|sans-serif}

從語法格式上可以看出，font-family有兩種聲明方式。第一種方式，使用name字體名稱，按優先順序排列，以逗號隔開，如果字體名稱包含空格，就應使用引號括起；第二種聲明方式使用所列出的字體序列名稱，如果使用fantasy序列，將提供默認字體序列。在CSS3中，比較常用的是第一種聲明方式。

【例7.1】（實例文件：ch07\7.1.html）

     <!DOCTYPE html>
     <html>
     <head>
     <style type=text/css>
     p{font-family:黑體}
     </style>
     </head>
     <body>
     <p align=center>天行健，君子以自強不息。</p>
     </body>
     </html>

在IE 11.0中的瀏覽效果如圖7-1所示，文字居中并以黑體顯示。

圖7-1 字型顯示

在字體顯示時，如果指定一種特殊字體類型，而在瀏覽器或者操作系統中該類型不能正確獲取，可以通過font-family預設多種字體類型。font-family屬性可以預置多個供頁面使用的字體類型，即字體類型序列，其中每種字型之間使用逗號隔開。如果前面的字體類型不能夠正確顯示，則系統將自動選擇后一種字體類型，以此類推。

所以，在設計頁面時，一定要考慮字體的顯示問題，為了保證頁面達到預計的效果，最好提供多種字體類型，而且最好以最基本的字體類型作為最后一個，其樣式設置如下所示。

     P{
     font-family:華文彩云,黑體,宋體
     }

當font-family屬性值中的字體類型由多個字符串和空格組成時（例如Times New Roman），該值就需要使用雙引號引起來。

7.1.2 字號font-size

一個網頁中，標題通常使用較大字體顯示，用于吸引人注意，小字體用來顯示正常內容。大小字體結合形成的網頁既能吸引人的眼球，又可提高閱讀效率。

在CSS3新規定中，通常使用font-size設置文字大小，其語法格式如下所示。

         {font-size:數值
     |inherit|xx-small|x-small|small|medium|large|x-large|xx-large|larger|
     smaller|length}

其中，通過數值來定義字體大小，例如用font-size:10px的方式定義字體大小為10px。此外，還可以通過其他屬性值定義字體的大小，各屬性值含義如表7-1所示。

表7-1 字號屬性值

【例7.2】（實例文件：ch07\7.2.html）

在IE 11.0中的瀏覽效果如圖7-2所示。網頁中的文字被設置成了不同的大小，其設置方式采用了絕對數值、關鍵字和百分比等形式。

圖7-2 字體大小顯示

在上面的例子中，font-size字體大小為50%時，其比較對象是上一級標簽中的10pt。同樣還可以使用inherit值，直接繼承上級標記的字體大小，代碼如下：

     <div style="font-size:50pt">上級標記
     <p style="font-size: inherit ">繼承</p>
     </div>

7.1.3 字體風格font-style

font-style通常用來定義字體風格，即字體的顯示樣式。在CSS3新規定中，語法格式如下所示。其屬性值有4個，具體含義如表7-2所示。

表7-2 字體風格屬性值

     font-style:normal|italic|oblique|inherit

【例7.3】（實例文件：ch07\7.3.html）

     <!DOCTYPE html>
     <html>
     <body>
     <p style="font-style:italic">梅花香自苦寒來</p>
     <p style="font-style:normal">梅花香自苦寒來</p>
     <p style="font-style:oblique">梅花香自苦寒來</p>
     </body>
     </html>

在IE 11.0中的瀏覽效果如圖7-3所示，分別顯示了不同的文字樣式。

圖7-3 字體風格顯示

7.1.4 加粗字體font-weight

通過設置字體粗細，可以讓文字顯示不同的外觀。通過CSS3中的font-weight屬性可以定義字體的粗細程度，其語法格式如下所示。

     {font-weight:100-900|bold|bolder|lighter|normal;}

font-weight的屬性值分別是bold、bolder、lighter、normal、100~900。如果沒有設置該屬性，則使用其默認值normal。屬性值設置為100~900，值越大，加粗的程度就越高。其具體含義如表7-3所示。

表7-3 加粗字體屬性值

瀏覽器默認的字體粗細是400，另外也可以通過參數lighter和bolder使得字體在原有基礎上顯得更細或更粗。

【例7.4】（實例文件：ch07\7.4.html）

     <!DOCTYPE html>
     <html>
     <body>
     <p style="font-weight:bold">學習雷鋒好榜樣(bold)</p>
     <p style="font-weight:bolder">學習雷鋒好榜樣(bolder)</p>
     <p style="font-weight:lighter">學習雷鋒好榜樣(lighter)</p>
     <p style="font-weight:normal">學習雷鋒好榜樣(normal)</p>
     <p style="font-weight:100">學習雷鋒好榜樣(100)</p>
     <p style="font-weight:400">學習雷鋒好榜樣(400)</p>
     <p style="font-weight:900">學習雷鋒好榜樣(900)</p>
     </body>
     </html>

在IE 11.0中的瀏覽效果如圖7-4所示。文字以不同方式加粗，其中使用了關鍵字加粗和數值加粗。

圖7-4 字體粗細顯示

7.1.5 小寫字母轉為大寫字母font-variant

font-variant屬性設置大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉換為大寫。在CSS3中，其語法格式如下所示。

     {font-variant:normal|small-caps|inherit}

font-variant有3個屬性值，分別是normal、small-caps和inherit。其具體含義如表7-4所示。

表7-4 各屬性值含義

【例7.5】（實例文件：ch07\7.5.html）

     <!DOCTYPE html>
     <html>
     <body>
     <p style="font-variant:normal">Happy BirthDay to You</p>
     <p style="font-variant:small-caps">Happy BirthDay to You</p>
     </body>
     </html>

在IE 11.0中的瀏覽效果如圖7-5所示，可以看到字母以大寫形式顯示。

圖7-5 字母大小寫轉換

通過對兩個屬性值產生的效果進行比較可以看到，設置為normal屬性值的文本以正常文本顯示，而設置為small-caps屬性值的文本中既有稍大的大寫字母也有小的大寫字母，也就是說，使用了small-caps屬性值的段落文本全部變成了大寫，只是大寫字母的尺寸不同。

7.1.6 字體復合屬性font

在設計網頁時，為了使網頁布局合理且文本規范，對字體設計需要使用多種屬性，例如定義字體粗細、定義字體大小等。但是多個屬性分別書寫相對比較麻煩，CSS3樣式表提供的font屬性就解決了這一問題。

font屬性可以一次性使用多個屬性的屬性值定義文本字體，其語法格式如下所示。

     {font:font-style font-variant font-weight font-size font-family}

font屬性中的屬性排列順序是font-style、font-variant、font-weight、font-size和font-family，各屬性的屬性值之間使用空格隔開，但是如果font-family屬性要定義多個屬性值，就需使用逗號“，”隔開。

在屬性排列中，font-style、font-variant和font-weight這三個屬性值是可以自由調換的；而font-size和font-family則必須按照固定的順序出現，如果這兩個屬性的順序不對或缺少一個，那么整條樣式規則可能會被忽略。

【例7.6】（實例文件：ch07\7.6.html）

在IE 11.0中的瀏覽效果如圖7-6所示，文字被設置成宋體并加粗。

圖7-6 復合屬性font顯示

7.1.7 字體顏色color

沒有色彩的網頁是枯燥而沒有生機的，這就意味著一個優秀的網頁設計者不僅要能夠合理安排頁面布局，還要具有一定的色彩視覺和色彩搭配能力，這樣才能夠使網頁更加精美、具有表現力，給瀏覽者以親切感。

在CSS3樣式中，通常使用color屬性來定義顏色。其屬性值通常使用的設定方式如表7-5所示。

表7-5 屬性值設定域

【例7.7】（實例文件：ch07\7.7.html）

在IE 11.0中的瀏覽效果如圖7-7所示，其中文字以不同顏色顯示，并采用了不同的顏色取值方式。

圖7-7 color屬性顯示

技巧提示

在本實例中，使用了3個CSS3中新增加的表現形式，分別是HSL（）、HSLA（）和RGBA（）。這3個函數在Firefox中支持，但IE瀏覽器尚不支持。

官术网_书友最值得收藏!

精通HTML5+CSS3+JavaScript網頁設計（視頻教學版）（第2版）