3.5 設置字體樣式

文本包含很多屬性，通過設置這些屬性，用戶可以控制網頁效果。一個網頁的設計效果是否精致，很大程度上取決于文本樣式設計。

3.5.1 實戰演練：定義字體類型

在網頁中，中文字體默認顯示為宋體，如果選擇【修改】｜【管理字體】命令，可以打開【管理字體】對話框，重設字體類型。

【操作步驟】

第1步，啟動Dreamweaver CC，打開3.4節創建的網頁文檔test.html，另存為test1.html。

第2步，在編輯窗口中拖選文本“《雨霖鈴》”。

第3步，選擇【修改】｜【管理字體】命令，打開【管理字體】對話框，切換到【自定義字體堆棧】選項卡。在【可用字體】列表框中選擇一種本地系統中可用字體類型，如“隸書”。

第4步，單擊按鈕，把選擇的可用字體添加到【選擇的字體】列表框中，如圖3.21所示。

圖3.21 添加可用字體

第5步，在【屬性】面板中，切換到CSS選項卡，在【字體】下拉列表框中可以看到新添加的字體，選擇【隸書】，即可為當前標題應用隸書字體效果，如圖3.22所示。

圖3.22 應用字體類型樣式

第6步，切換到【代碼】視圖，可以看到Dreamweaver CC自動使用CSS定義的字體樣式屬性。

     <p class="red center"><span style="font-family: '隸書'">《雨霖鈴》 </span></p>
     <p class="red center">柳永</p>

3.5.2 實戰演練：定義字體顏色

選擇【格式】｜【顏色】命令，打開【顏色】面板，利用該面板可以為字體設置顏色。

【操作步驟】

第1步，啟動Dreamweaver CC，打開3.5.1節的網頁文檔test1.html，另存為test2.html。

第2步，在編輯窗口中拖選段落文本“《雨霖鈴》”。在【屬性】面板中設置字體格式為“標題1”。

第3步，拖選段落文本“柳永”。在【屬性】面板中設置字體格式為“標題2”。同時修改字體“柳永”應用類樣式為.center，而不是復合類樣式，清除紅色字體效果，僅讓二級標題居中顯示，如圖3.23所示。

圖3.23 修改標題文本格式化和類樣式

第4步，拖選詞正文的第一段文本，在【屬性】面板中切換到CSS選項卡，單擊“顏色”小方塊，從彈出的顏色面板中選擇一種顏色，這里設置顏色為淺綠色，RGBa值顯示為rgba(60,255,60,1)，如圖3.24所示。

圖3.24 定義第一段文本顏色

第5步，拖選第二段文本，設置字體顏色為rgba(60,255,60,0.9)，用戶也可以直接在【屬性】面板的顏色文本框中輸入“rgba(60,255,60,0.9)”，如圖3.25所示。

圖3.25 定義第二段文本顏色

第6步，以同樣的方式執行如下操作：

設置第3段文本字體顏色為rgba(60,255,60,0.8)。

設置第4段文本字體顏色為rgba(60,255,60,0.7)。

設置第5段文本字體顏色為rgba(60,255,60,0.6)。

設置第6段文本字體顏色為rgba(60,255,60,0.5)。

設置第7段文本字體顏色為rgba(60,255,60,0.4)。

設置第8段文本字體顏色為rgba(60,255,60,0.3)。

第7步，選中標題1文本“《雨霖鈴》”，在【屬性】面板中修改字體顏色為green。

第8步，保存文檔，按F12鍵，在瀏覽器中預覽，則顯示效果如圖3.26所示。

圖3.26 定義字體顏色效果

【拓展】

在網頁中表示顏色有3種方法：顏色名、百分比和數值。

（1）使用顏色名是最簡單的方法，目前能夠被大多數瀏覽器接受且符合W3C標準的顏色名稱有16種，如表3.1所示。

表3.1 符合標準的顏色名稱

（2）使用百分比，例如：

     color:rgb(100%,100%,100%);

在上面設置中，結果將顯示為白色，其中第1個數字表示紅色的比重值，第2個數字表示藍色比重值，第3個數字表示綠色比重值，而rgb(0%,0%,0%)會顯示為黑色，3個百分值相等將顯示灰色。

（3）使用數字。數字范圍從0到255，例如：

     color:rgb(255,255,255);

上面這個聲明將顯示為白色，而rgb(0,0,0)將顯示為黑色。使用rgba()和hsla()顏色函數，可以設置4個參數，其中第4個參數表示顏色的不透明度，范圍從0到1，其中1表示不透明，0表示完全透明。

使用十六進制數字來表示顏色（這是最常用的方法），例如：

     color:#ffffff;

其中要在十六進制數字前面加一個#顏色符號。上面這個定義將顯示白色，而#000000將顯示為黑色，用RGB來描述：

     color: #RRGGBB;

3.5.3 實戰演練：定義粗體和斜體樣式

粗體和斜體是字體的兩種特殊藝術效果，在網頁中起到強調文本的作用，以加深或提醒用戶注意該文本所要傳達信息的重要性。

【操作步驟】

第1步，啟動Dreamweaver CC，打開本小節備用練習文檔test.html，另存為test1.html。

第2步，在編輯窗口中拖選段落文本“《雨霖鈴》”。在【屬性】面板中切換到【HTML】選項卡，然后單擊【粗體】按鈕，如圖3.27所示。

圖3.27 定義加粗字體效果

第3步，拖選段落文本“柳永”。在【屬性】面板中單擊【斜體】按鈕，為該文本應用斜體效果，如圖3.28所示。

圖3.28 定義斜體字體效果

第4步，切換到【代碼】視圖下，使用HTML代碼則顯示如下：

     <p class="center"><strong>《雨霖鈴》 </strong></p>
     <p class="center"><em>柳永</em></p>

【拓展】

在標準用法中，不建議使用<strong>和<em>標記定義粗體和斜體樣式。提倡使用CSS樣式代碼進行定義。例如，針對上面示例，另存為test2.html，然后使用CSS設計相同效果，則文檔完整代碼如下：

3.5.4 實戰演練：定義字體大小

字體大小可以使用CSS的font-size屬性定義，在Dreamweaver中可以快速進行設置。

【操作步驟】

第1步，啟動Dreamweaver CC，打開本小節備用練習文檔test.html，另存為test1.html。

第2步，在編輯窗口中拖選段落文本“《雨霖鈴》”。在【屬性】面板中切換到【CSS】選項卡，然后在【大小】下拉列表框中設置字體大小為24px，如圖3.29所示。

圖3.29 定義第1段文本字體大小

第3步，拖選段落文本“柳永”。在【屬性】面板中設置字體大小為18px，如圖3.30所示。

圖3.30 定義第2段文本字體大小

第4步，切換到【代碼】視圖下，則自動生成的代碼如下：

     <p class="center"><span style="font-size: 24px">《雨霖鈴》 </span></p>
     <p class="center"><span style="font-size: 18px">柳永 </span></p>

第5步，保存文檔，按F12鍵在瀏覽器中預覽，則顯示效果如圖3.31所示。

圖3.31 定義字體大小顯示效果