1.3 唐詩三首——網頁文本字體

1.3.1 編輯字體列表

掌握了文字的簡單排版，并且了解到可通過CSS樣式定義文字的顏色之后，下面將重點介紹CSS樣式對文本的多個屬性的定義。

如圖1-20所示，新建網頁文件并在Dreamweaver文檔窗口中打開該文件。在網頁中分別輸入唐詩標題“絕句”以及唐詩內容，每輸入一行均使用【Enter】鍵換行。

為了能表現了唐詩的“味”，可以從文本的字體上下功夫，例如選擇一種字體，感覺也隨之不同。在為文本設置樣式前，必須先搞清楚需要定義幾個樣式，每個樣式需要具體定義哪些屬性。

下面將要為唐詩的標題定義為字號較大的粗體楷體的文本，而對于唐詩的內容則定義字號一般的正?？w文本。所以，此時需要定義兩個樣式，并最終應用到唐詩標題和內容上。

01 如圖1-21所示，打開【CSS樣式】面板，單擊【新建CSS規則】按鈕。

02 彈出【新建CSS規則】對話框：

ⅰ.在【選擇器類型】中選擇“類（可應用于任何標簽）”單選按鈕。

ⅱ.在【名稱】中輸入“sbt”。

ⅲ.在【定義在】中選擇“僅對該文檔”單選按鈕。

03 單擊【確定】按鈕進行該自定義樣式的具體設置。

04 彈出如圖1-22所示的【.sbt的CSS規則定義】對話框，在其中設置文本的字體為“楷體”。可單擊【字體】后的下拉箭頭，在彈出的下拉列表框中進行選擇。

05 若當前所有的字體列表沒有“楷體”，可以可單擊選擇“編輯字體列表…”進行字體的定義添加。

06 彈出【編輯字體列表】對話框，在【可用字體】列表項中選一款楷體字“華文行楷”，單擊【左移】按鈕到【選擇的字體】列表框中。

02 繼續選擇【可用字體】列表框中的“宋體”并將其移入到【選擇的字體】列表框中。

08 單擊【確定】按鈕完成字體的添加。

01 如圖1-23所示，進行“.sbt”的CSS規則定義，在【字體】下拉列表框中選擇剛才定義的“‘華文行楷’，‘宋體’”選項。

02 在【大小】下拉列表框中選擇“36”、“像素（px）”選項。

03 在【粗細】下拉列表框中選擇“粗體”選項。

04 在【樣式】下拉列表框中選擇“斜體”選項。

05 單擊【確定】按鈕完成為唐詩標題而定義的樣式。

注：為什么在編輯添加新的字體列表時，在選擇了“華文行楷”之后還添加了“宋體”？另外，在選擇【字體】時其實顯示為“‘華文行楷’，‘宋體’”，為什么？

首先就是為什么要多添加一種字體，CSS允許定義文本字體時有多種字體，但不是說最終字體是列出的這些字體的混合字體，而是當前計算機中所具備的第一個字體；再一個就是按照字體的先后順序與當前計算機中存在的字體依次比較，如果當前計算機中具備該字體就顯示為該字體，否則顯示為當前計算機默認的字體。

所以，一般定義字體是選擇大眾化的絕大部分計算機都默認有安裝的字體。如果非要使用一種很特殊很少見但又必須指定需要該字體效果的字體時，我們就會采用字體圖像化在網頁插入圖像來處理了。

1.3.2 定義文本字體樣式

01 如圖1-24所示，打開【CSS樣式】面板，單擊【新建CSS規則】按鈕。

02 彈出【新建CSS規則】對話框：

ⅰ.在【選擇器類型】中選擇“類（可應用于任何標簽）”單選按鈕。

ⅱ.在【名稱】中輸入“snr”。

ⅲ.在【定義在】中選擇“僅對該文檔”單選按鈕。

03 單擊【確定】按鈕進行該自定義樣式的具體設置。

01 如圖1-25所示，在【字體】的下拉列表框中選擇“‘華文行楷’，‘宋體’”選項。

02 在【大小】下拉列表框中選擇“18”、“像素（px）”選項。

03 單擊【確定】按鈕完成CSS規則的定義。

1.3.3 應用文本字體樣式

01 如圖1-26所示，選擇唐詩標題所在行的所有文本。

02 打開【屬性】面板，在【樣式】下拉列表框中選擇“sbt”選項。

03 繼續選擇唐詩內容的兩段文本。

04 在【屬性】面板的【樣式】下拉列表框中選擇樣式“snr”。

05 按【Ctrl】+【S】組合鍵保存當前網頁，按【F12】鍵打開瀏覽器瀏覽“唐詩三首”網頁。如圖1-27所示為CSS美化后的網頁預覽效果。