過去,修改一個網頁的字樣通常是指把相關的文本嵌套到<tag>標簽中,并用屬性來控制它的顏色、大小和式樣。現在,人們已不再認同這種方法,因為它將視覺式樣和實際的內容標記混合起來。如今我們推薦使用將字樣式樣信息集中到一個叫做層疊式樣表(CSS)的單獨文件中的方法。
將字體信息集中到一個CSS文件中具有許多明顯的優點:它易于操作,不需要任何特殊的軟件,并且能夠在大多數主流瀏覽器中統一運行。更重要的是,由于信息集中到一個單獨的位置,修改網頁的視覺外觀相當方便:你只需簡單修改主式樣表的字體或顏色,相關改變就會立即“層疊”到你的整個網站中。
聽起來很有趣,是嗎?那么請繼續閱讀下去,因為我將在本文中探討CSS font屬性,它旨在替代舊有的<font>元素,如果你需要對HTML頁面的字樣、顏色、文字大小和間距進行集中控制,它是一個可利用的強大工具。
控制字樣
字體屬性定義了對應元素所使用的字體。這個屬性通常包含一個由逗號隔開的字體名稱列表;并可以用引號來封套那些包含空白的名稱。應用時,瀏覽器將使用它在列表中找到的第一個字體,或如果沒有找到有效字體,就使用默認的標準瀏覽器字體。
列表A中是這個指示的一個應用實例:
列表A
<html>
<head>
<style type="text/css">
.quote {
font-family: "Bookman Old Style", "Verdana";
}
</style>
</head>
<body>
<div class="quote">To be or not to be, that is the question.</div>
</body>
</html>
圖A顯示輸出結果。
圖A
Font_family
記住重要的一點,這個指示十分依賴于客戶端系統所顯示的字體;在上面的例子中,如果系統沒有顯示Bookman Old Style和Verdana字體,就將使用默認的瀏覽器字體。要避免這個問題,最好是在特殊字體名稱列表后增加一個通用字體名稱列表,如serif、sans-serif或cursive;這告訴瀏覽器使用那個字體類別中最相匹配的字體。列表B是上面實例的一個修訂版本,它正好解決上述問題。
列表B
<html>
<head>
<style type="text/css">
.quote {
font-family: "Bookman Old Style", "Verdana", "cursive";
}
</style>
</head>
<body>
<div class="quote">To be or not to be, that is the question.</div>
</body>
</html>
新聞熱點
疑難解答