在制作網(wǎng)站時,字體樣式涉及文字型體效果,包括字體類型、字體大小、字體顏色等基本效果,還包括字體粗細、下劃線、斜體、大小寫等特殊效果。文本樣式主要涉及文本排版效果?!?/span>
CSS使用font-family屬性來定義字體類型,另外使用font屬性也可以定義字體類型。
?font-family是字體類型專用屬性,用法如下:
font-family : namefont-family : ncursive |
fantasy | monospace
| serif | sans-serif
name表示字體名稱,可指定多種字體,多個字體將按優(yōu)先順序排列,以逗號隔開。在網(wǎng)頁設計時,如果字體名稱包含空格,則應使用引號括起。第二種聲明方式使用所列出的字體序列名稱,如果使用fantasy序列,將提供默認字體序列。
?font是一個復合屬性,該屬性能夠設置多種字體屬性,用法如下:
font : font-style || font-variant || font-weight || font-size || line-height ||
font-familyfont : caption | icon | menu | message-box | small-caption | status-bar屬性值之間以空格分隔。
font屬性至少應設置字體大小和字體類型,且必須放在后面,否則無效。前面可以自由定義字體樣式、字體粗細、大小寫和行高,詳細講解將在后面內(nèi)容中分別介紹。
【示例】啟動Dreamweaver,新建一個網(wǎng)頁,保存為test.html,在<body>標簽內(nèi)輸入一行段落文本。
<p>定義字體類型</p>
在<head>標簽內(nèi)添加<style type="text/css">標簽,定義一個內(nèi)部樣式表,然后輸入下面樣式,用來定義網(wǎng)頁字體的類型。
body { font-family:Arial, Helvetica,
sans-serif; /*字體類型*/}
p {/* 段落樣式 */ font:14px "黑體";
/*14像素大小的黑體字體*/}
中文網(wǎng)頁字體一般多定義為宋體類型,對于標題或特殊提示信息,如果需要特殊字體,則建議采用圖像形式來間接實現(xiàn)。原因在網(wǎng)頁設計時是中文字體類型比較少,通用字體類型就更少了,字體的表現(xiàn)力比較弱,即使存在各種藝術(shù)字體,但是恐于藝術(shù)字體的應用范圍窄,很少被設計師用來作為網(wǎng)頁字體使用。
CSS使用font-size屬性來定義字體大小,該屬性用法如下:
font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length
其中,xx-small(最?。-small(較?。?、small(?。?、medium(正常)、large(大)、x-large(較大)、xx-large(最大)表示絕對字體尺寸,這些特殊值將根據(jù)對象字體進行調(diào)整。
larger(增大)和smaller(減少)這對特殊值能夠根據(jù)父對象中字體尺寸進行相對增大或者縮小處理,使用成比例的em單位進行計算。
length可以是百分數(shù),或者浮點數(shù)字和單位標識符組成的長度值,但不可為負值。其百分比取值是基于父對象中字體的尺寸來計算,與em單位計算相同。
【示例】啟動Dreamweaver,新建一個網(wǎng)頁,保存為test.html,在<body>標簽中輸入以下內(nèi)容:
<div>
<p class="p1">明月幾時有? 0.6in</p>
<p class="p2">明月幾時有? 0.8em</p>
<p class="p3">明月幾時有? 2cm</p>
<p class="p4">明月幾時有? 16pt</p>
<p class="p5">明月幾時有? 2pc<
/p></div>在<head>標簽內(nèi)添加<style type="text/css">標簽,定義一個內(nèi)部樣式表,然后輸入下面樣式,分別設置各個段落中的字體大小。div{font-size:20px;} /*以像素為單位設置div標簽字體大小*/
.p1{ font-size: 0.6in; } /*以英寸為單位設置字體大小*/
.p2{ font-size: 0.8em; } /*以父級字體大小為參考設置大小*/
.p3{ font-size: 2cm ; } /*以厘米為單位設置字體大小*/
.p4{ font-size: 16pt; } /*以點為單位設置字體大小*/
.p5{ font-size: 2pc; } /*以皮卡為單位設置字體大小*/