05使用CSS設置字體和文本樣式

使用CSS設置字體和文本樣式:

1.定義字體類型font-family

用法:

font-family:name;

font-family:ncursive|fantasy|monospace|serif|sans-serif

name表示字體名稱,可指定多種字體,用空格隔開。按優先順序排列。如果字體名稱包含空格,則應該使用括號()括起來。

 

font是一個複合屬性,所謂複合屬性是指該屬性能夠設置多種字體屬性,用法如下:

font:font-style||font-variant||font-weight||font-size||line-height||font-family

font:caption|icon|menu|message-box|small-caption|status-bar

屬性值之間以空格分隔。font屬性中至少應設置字體大小和字體類型,且必須放在後面,否則無效。前面可以定義字體樣式、字體粗細、大小寫和行高。

 

習慣上,中文網頁字體很多都被定義爲宋體類型,對於標題或特殊提示信息,如果需要使用特殊字體,則建議採用圖像形式來間接表現。原因是中文類型比較少,通用字體類型更少,字體的表現力較弱,即使存在各種藝術字體,但其應用範圍較窄。

英文字體類型比較豐富,通用字體的選擇餘地大,藝術表現力較強。習慣上,標題都採用無襯線字體,藝術字體或手寫體,而網頁正文則多使用襯線字體。

 

對於英文或其他西文字體來說,CSS提供了5種通用字體。

(1)serif:襯線字體。

(2)sans-serif:無襯線字體。

(3)cursive:草體。

(4)fantasy:奇異字體。

(5)monospace:等寬字體。

 

字體列表以逗號進行分隔,瀏覽器會按字體名稱的順序逐一在用戶的計算機上進行搜索已經安裝的字體,一旦遇到與要求相匹配的字體,就按字體顯示網頁內容,並停止搜索;如果不匹配就繼續搜索,直到找到爲止,如果樣式表裏的所有字體都沒有安裝的話,瀏覽器就會用自己默認的字體來替代顯示網頁的內容。

 

2.定義字體大小font-size

css使用font-size屬性來定義字體大小,該屬性如下:

font-size:xx-small|xsmall|small|medium|large|x-large|xx-large|smaller|length

其中xx-small(最小)、x-small(較小)、small(小)、medium(正常)、large(大)、x-large(較大)、xx-large(最大)表示絕對字體尺寸,這些特殊值將根據對象字體進行調整。

large(增大)和smaller(減少)這些特殊值能根據父對象中的字體尺寸進行相對增大或者縮小處理,使用成比例的em單位進行計算。

length可以是百分數,或者浮點數字和單位標識符組成的長度值,但不可爲負值。其百分比取值是基於父對象中字體的尺寸來計算,與em單位計算方法相同。

 

在網頁設計中,常用像素(PX)和百分比(%em)作爲字體大小的單位。

CSS提供了很多單位,它們可以被分爲兩大類:絕對單位和相對單位。

絕對單位所定義的字體大小事固定的,大小顯示效果不會受外界因素影響。例如,in(inch)、cm(centimeter)、mm(millimeter)、pt(point)、pc(pica)。此外,xx-small、x-small、small、medium、large、x-large、xx-large這些關鍵字也是絕對單位。

相對單位所定義的字體大小一般是不固定的,會根據外界環境而不斷髮生變化。例如:px、em、ex、%、larger和smaller這兩個關鍵字將以父元素的字體大小爲參考進行換算。

 

在網頁設計中,網頁設計師常用的字體帶下單位包括了像素和百分比,那麼怎樣選擇合適的字體大小單位呢?

(1)對於網頁寬度固定或者欄目寬度固定的佈局,使用像素是正確的選擇。

(2)對於頁面寬度不固定或者欄目寬度也不固定的頁面,使用百分比或em是一個正確的選擇。一方面有利於客戶端瀏覽器調整字體大小;另一方面,通過設置字體大小的單位爲em或百分比,使字體能夠適應版面寬度的變化。

 

3.定義字體顏色color:color;

CSS使用color屬性來定義字體顏色,該屬性用法如下:color:color;

在CSS中,顏色的設置統一採用RGB格式,即按“紅黃藍”三原色的不同比例組成各種顏色。比如RGB(100%,0%,0%),或者是用十六進制表示爲#ff0000,即爲紅色。

.p1{color:red;}                   /*使用顏色名*/

.p2{color:#693333;}                /*使用十六進制*/

.p3{color:rgb(120,120,120);}         /*使用RGB*/

.p4{color:rgb(0%,100%,50%);}

 

4.定義字體粗細font-weight

CSS使用font-weight屬性來定義字體粗細,該屬性用法如下。

font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

 

font-weight屬性值比較特殊,其中normal關鍵字表示默認值,即正常的字體,相當於取值爲400。bold關鍵字表示粗體,相當於取值700,或者使用<b>標籤定義的字體效果。bolder(較粗)和lighter(較細)相對於normal字體粗細而言。

另外也可以設置值爲100,200,300,400,500,600,700,800,900,他們分別表示字體的粗細,是對字體粗細的一種量化方式,值越大就表示越粗,相反就表示越細。

 

對於中文網頁設計來說,一般僅用到bold和normal兩個屬性值即可。

 

5.定義斜體字體font-style

CSS使用font-style屬性來定義字體傾斜效果,該屬性用法如下。

font-style:normal|italic|oblique

其中normal表示默認值,即正常的字體,italic表示斜體。italic和oblique兩個取值只能在英文等西方文字中有效。

 

6.定義下劃線、刪除線和頂劃線text-decoration

CSS使用text-decoration屬性來定義字體下劃線,刪除線和頂劃線效果,該屬性用法如下。

text-decoration:none||underline||overline||line-though||blink

其中none表示默認值,即無裝飾字體,underline表示下劃線效果,line-though表示刪除線效果,overline表示頂劃線效果,blink表示閃爍效果。(blink在IE6中不支持。)

 

如果需要文字不僅有下劃線,同時還有頂劃線和刪除線,這時可以將underline和overline的值同時賦給text-decoration,並用空格分開。

 

7.定義字體大小寫font-variant

CSS使用font-variant屬性來定義字體大小寫效果,該屬性用法如下。

font-variant:normal|small-caps

其中,normal表示默認值,即正常的字體,small-caps表示小型的大寫字母字體。

注意:font-variant僅支持以英文爲代表的西文字體,中文字體沒有大小寫的效果區分。如果設置了小型大寫字體,但是該字體沒有找到原始小型小寫字體,那麼瀏覽器會模擬一個。例如,可通過使用一個常規字體,將其小寫字母替換爲縮寫過的大寫字母。

 

CSS還定義了一個text-transform屬性,該屬性也能夠定義字體大小寫效果。不過該屬性主要定義單詞大小寫樣式,用法格式如下。

text-transform:none|capitalize|uppercase|lowercase

其中,none表示默認值,無轉換髮生;capitalize表示將每個單詞的第一個字母轉化爲大寫,其餘無轉化發生;uppercase表示把所有的字母都轉化成大寫字母;lowercase表示把所有的字母都轉化爲小寫字母。

 

在IE和FF 中會發現:IE瀏覽器認爲只要好似單詞,就把首字母轉換爲大寫,而FF瀏覽器認爲只有單詞通過空格間隔之後,才能夠稱爲獨立意義上的單詞,所以幾個單詞連在一起時就算一個詞。

 

8.定義文本對齊text-align

CSS使用text-align屬性來定義文本的水平對齊方式,該屬性的用法如下。

text-align:left|right|center|justify

該屬性取值包括四個:其中left表示默認值,左對齊;right表示右對齊;center表示居中對齊;justify表示兩端對齊。

 

text-align是塊級屬性,只能用於<div><p><ul><h1><h6>等標識符中。文本水平對齊不僅可以控制文本的水平對齊,而且可以控制其他塊級元素的水平對齊。

CSS中,讓元素居中的方法通常是使用margin屬性,將元素的margin-leftmargin-right屬性設置爲auto。在實際應用中,我們可以將其父級元素的text-align屬性設置爲center。(IE6以下版本必須這樣)需要特別注意的是,必須要爲居中的元素指定寬度和高度。

 

9.定義垂直對齊vertical-align

CSS中使用vertical-align屬性來定義文本的垂直對齊方式,該屬性的用法如下:

vertical-align:auto|baseline|sub|super|top|text-top|middle|bottom|lengh

其中,auto屬性值將根據layout-flow屬性的值對齊對象內容;baseline表示默認值,表示將支持valign特性的對象內容與基線對齊;sub表示垂直對齊文本的下標;super表示對齊文本的上標;top表示將支持valign特性的對象內容與對象頂端對齊;text-top將支持valign特性的對象文本與對象頂端對齊;middle表示將支持valign特性的對象內容與對象中部對齊;text-bottom將支持valign特性的對象文本與對象頂端對齊;length表示由浮點數字和單位標識符組成的長度值或者百分比,可爲負數,定義由基線算起的偏移量,基線對於數值來說爲0,對於百分數來說就是0%。

 

vertical-align屬性不支持塊級元素對齊,只有當塊級元素顯示爲單元格時纔有效。

 

10.定義字間距和行間距 letter-spacing和word-spacing

CSS使用letter-spacing屬性定義子間距,使用word-spacing屬性定義詞間距,這兩個屬性的取值都是長度值,由浮點數字和單位標識符組成,既可以是絕對數值又可以是相對數值,默認值爲normal,表示默認間隔。

定義詞間距時,以空格爲基準進行調節,如果多個單詞被連在一起,則被word-spacing視爲一個單詞,則分隔的多個漢字就被視爲不同的單詞,word-spacing屬性此時有效。

對於中文用戶來說,letter-spacing屬性有效,而word-spacing屬性無效。

 

11.定義行間距line-height

行間距,是段落文本行之間的距離。CSS使用line-height屬性定義行高,該屬性的用法如下。

line-height:normal|length

其中,normal表示默認值。一般爲1.2em,length表示百分比數字,或者由浮點數字和單位標識符組成的長度值,允許爲負值。

 

行間距取值單位一般爲em或者百分比,很少使用像素,也不建議使用。

當line-height屬性取值小於一個字大小時,就會發生上下行文本重疊的現象。

 

一般行間距的最佳設置範圍爲1.2~1.8em,當然,可以根據需要特殊處理。根據的原則:字體越大,行間距越小。

例如:若段落字體大小爲12px,則行間距設置爲1.8em比較合適;如果字體大小爲14px,則行間距爲1.5~1.6em比較合適;如果段落字體大小爲16~18px,則行間距設置爲1.2em比較合適。一般瀏覽器默認行間距爲1.2em左右。例如,IE瀏覽器默認爲19px,(默認字體大小爲16px)即1.18em,而FF瀏覽器默認爲1.12em。

 

12.定義縮進text-indent

在CSS中使用text-indent屬性定義首行縮進,該屬性的用法如下。

text-indent:length

length表示百分比數字或者由浮點數字和單位標識符組成的長度值,允許爲負值。建議在設置縮進單位時,以em爲設置單位,它表示一個字距,這樣比較精確確定首行縮進效果。

例如:text-indent:2em;

 

使用text-indent屬性可以設計懸垂縮進效果。

 

text-indent屬性可以去負值,定義左側補白,防止去負縮進導致首行文本伸到段落的邊界外邊。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章