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