DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS字體屬性全解析
CSS字體屬性全解析
編輯:CSS詳解     
這篇文章主要介紹了CSS中的而各種字體屬性,是CSS入門學習中的基礎知識,需要的朋友可以參考下

話說CSS字體屬性font-family、font-style、font-size、font-weight、font-variant:

使用CSS,可以對字體進行設置,字體屬性包括五種常見屬性:字體系列font-family、字體樣式/字體風格font-style、字體大小font-size、字體粗細font-weight、字體變量font-variant。通過這五個屬性,可以設定文本在web頁面的顯示效果或文本的打印效果。

1.字體系列font-family

支持按照優先級順序列出各種要指派使用的字體,當用戶系統沒有安裝首選字體時候,向後搜索,選用下一個指派的字體解析顯示。
如:

復制代碼代碼如下:
p{font-family:Verdana,Arial,Helvetica,sans-serif;}
其中,字體名稱由兩個或者多個單詞構成,必須使用引號括起來,如下:

復制代碼代碼如下:
p{font-family:"Times New Roman",Georgia,serif;}

說明:由於一般的操作系統與浏覽器都安裝與支持以下字體,所以web開發中使用最安全的字體系列為:Arial、Helvetica、 Times New Roman、 Times、 Courier New 和 CourIEr。而Verdana、Georgia、Comic Sans MS、Trebuchet MS、Arial Black和Impact字體對於蘋果的Mac系統和微軟的Windows系統來說是安全的,但可能不支持安裝在像Linux這樣的開源操作系統中。其他經常使用但是不太安全的字體還有:Palatino、Garamond、Bookman和Avant Garde等。

2.字體樣式/字體風格font-style
font-style屬性有三個值:normal、italic和 oblique。三種字體風格對應三種表現的字體效果:
normal:默認樣式。浏覽器顯示一個標准的字體。
italic:浏覽器會顯示一個斜體的字體。
oblique:浏覽器會顯示一個傾斜的字體。

容易產生疑問和困惑是italic 和 oblique 之間的區別。主要區別總結為:

字體樣式italic、oblique 需要系統中字體文件的支持。
字體名中帶有“Italic”、“Cursive”(草書)或“Kursiv”(一種書信體)的字體通常標記為“italic”。
字體名中帶有“Oblique”、“Slanted”(斜體)或“Incline”(傾斜)的字體通常標記為“oblique”。
如果“italic”字體不存在,而只有Oblique字體,則使用後者“oblique”字體,但若“oblique”字體不存在,則不能用“italic”替代,此時浏覽器會將正常直立字體傾斜一個角度來作為傾斜字體使用。
在很多情況下,斜體和傾斜字體幾乎看不出區別,特別是對那些沒有特別提供這兩種樣式的字體來說
從本質上來說,斜體(italic)是一種簡單的字體風格,對每個字母的結構有微小的變動,外觀區別於正常字體風格。不過,傾斜(oblique)風格則是正常豎直文本的一個傾斜版本。

通常情況下,italic 和 oblique 文本在 web 浏覽器中看上去不存在明顯的差別。

3.字體大小font-size

字體大小的設置主要分兩種類型:固定大小和相對大小。

字體大小的度量單位包括很多,常用的有像素px、磅pt、em、百分比。

①px,表示pixel,像素的大小隨用戶顯示器的大小和像素深度而變。一個像素等於屏幕上一個點的高度/寬度,是屏幕上顯示的最小單位。這個度量單位最適合顯示器。
②pt,表示point,來源於打印設計,是一印刷行業常用單位,叫“磅”,等於1/72英寸。pt是一個標准的長度單位,最適合於印刷,但也常用於用戶顯示器。
③em,相當於當前字體1個字大小,用於描述相對尺寸。即%,在css中,1em=100%,結合CSS繼承關系使用,具有靈活性。 需要注意的是,相對字體大小的計算是基於父元素的字體大小,如果元素之間層層嵌套,問題有時候會復雜的不可預料。例如,對於在單元格、表格、div中的一段文本,如果在每一級都規定了自己的相對字體大小規則,那麼相對度量方式就會產生復合效應。 不同的浏覽器間並沒有一個統一的標准來定義如何指定一個給定元素的父元素,以及在相對字體大小計算中哪一個才是參考字體。所以,為了成功使用相對字體大小方式,需要仔細規劃網頁設計和CSS樣式,盡量避免潛在的元素嵌套問題。
④百分比,相對於當前字體em的比例)。
而英寸in(72pt)、厘米cmt(約28pt)、毫米mm(約3pt)、pic(相當於12pt)這些度量單位則適合於打印,是一種印刷度量單位。ex是相對於當前字體大小,等於小寫字母x的高度,是一種不常用的度量單位。

擴展:顯示器的PPI(DPI),表示pixel(dot)per inch,每英寸的像素(點)數,表示“清晰度”,“精度” 。設置更改方法:桌面上點右鍵,彈出快捷菜單: > 屬性 > settings > Advanced > General > DPI setting > 96 DPI。

在浏覽網頁過程中,所有的“大”“小”概念,都是基於“屏幕”這個“顯示界面”上。“屏幕”上的各種信息,包括文字、圖片、表格等等,都會隨屏幕的分辨率變化而變化。在不同分辨率下,無論是px還是pt,屏幕上的各種信息都會改變大小。
由於屏幕大小不同,分辨率也不同,要保證一個字體在所有用戶面前呈現的大小都一樣,這是一個不可能實現的任務。

在Windows系統紅,px和pt的使用區別,只有當用戶改變默認的96DPI下才會產生。使用px定義文字,無論用戶怎麼設置,都不會改變大小;使用pt定義文字,當用戶設置超過96DPI的值,數值越大,字體就越大。附公式:px = pt * DPI / 72 。

4.字體粗細font-weight
font-weight用戶設定字體的濃淡粗細程度,可能的值:normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
可以分為三類:關鍵字屬性,包括normal 、bold 兩個;相對關鍵字屬性,它的粗細是相對於從上級父元素的繼承值而言的,包括bolder和lighter兩個;數字屬性,包括從“100”到“900”的9個數字序列(只能是100的整數倍)。這個數字序列表示從最細(100)到最粗(900)的字體粗細程度。
可用值 屬性值的說明

normal 缺省值。正常字體顯示。
bold 粗體
bolder 相對於父元素稍粗
lighter 相對於父元素稍細
100 至少和200一樣淡
200 至少和100一樣粗,至少和300一樣淡
300 至少和200一樣粗,至少和400一樣淡
400 字體正常顯示,相當於normal
500 至少和400一樣粗,至少和600一樣淡
600 至少和500一樣粗,至少和700一樣淡
700 粗體,相當於bold
800 至少和700一樣粗,至少和800一樣淡
900 至少和800一樣粗

字體粗細屬性是根據用戶電腦上安裝的字體作相應匹配顯示的。很多情況下,由於系統作了最相近的匹配,從顯示效果上很難看出不同的 font-weight值的區別。對於種類繁多花樣百出的字體而言,目前並沒有一個統一的規則標明粗細的程度。有的字體名稱本身就能描繪粗細程度,如Arial Bold字體顯示本身就比Arial粗不少,像這樣的字體名稱的主要作用就是在單個字體集中區別字體的粗細程度。
如果某種字體集中已使用了9級數值的范圍(如OpenType一樣),字體的粗細應該直接與9級數值相匹配。如果一種字體同時擁有Medium、Book、Regular、Roman或者Normal的字體集名稱,Medium通常分配為“500”,其他4個分配為“400”。如果字體集中有標記為“bold”的名稱,相當於數值“700”。如果字體集中少於9級粗細級別,參照缺失填補方式的規定。有了以上匹配方式,對於“bolder”和“lighter”的匹配也不難理解。“bolder”就是匹配字體集中可用的下一級較粗字體,反之“lighter”也是一樣,匹配下一級較細字體。它們的參照系都是繼承值,因此粗細程度都是相對於繼承值而言的。

如果字體集中少於9級粗細度算法,那麼填補缺失的方法如表所示:

填補填補缺失的方法

5.字體變量font-variant

font-variant 屬性設置小型大寫字母的字體顯示文本,這意味著所有的小寫字母均會被轉換為大寫,但是所有使用小型大寫字體的字母與其余大寫文本相比,其字體尺寸偏小。

可能的值
值 描述
normal 默認值。浏覽器會顯示一個標准的字體。
small-caps 浏覽器會顯示小型大寫字母的字體。
inherit 規定應該從父元素繼承 font-variant 屬性的值。任何的版本的IE(包括 IE8)都不支持屬性值 "inherit"。
對於web開發,一般不要在一篇文章中定義超過3級的粗細程度,且頁面設計時粗細程度應有所跳躍,否則反而不能突出加粗的內容。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved