|
字組及字體關(guān)系圖如下:
現(xiàn)在有必要解釋一下serif和sans-serif的區(qū)別. “sans”來(lái)源于古法語(yǔ), 意為”without”, 即”非”. 而”serif”來(lái)源于荷蘭語(yǔ), 譯為襯線, 指字母的拐角或端點(diǎn)位置的修飾線, 如圖所示:
所以非等寬字組又分為有襯線(serif)和無(wú)襯線(sans-serif)兩組. verdana和arial均屬于無(wú)襯線組.
對(duì)于字組和字體的選擇, 其實(shí)是很個(gè)性化的, 讀者可以根據(jù)自己的喜好, 靈活搭配, 但總的原則是不要選取一些罕見(jiàn)的字體, 如果訪問(wèn)者沒(méi)有這種字體的話,就會(huì)和你的設(shè)計(jì)意圖相悖.
例:如font-family的屬性值如下:
font-family: verdana,arial,sans-serif;
瀏覽器首先在字體庫(kù)中尋找verdana字體, 如果沒(méi)找到則尋找arial字體, 如果還沒(méi)找到就在sans-serif字組中的選擇其他字體顯示.
2. font-style: 包括normal, italic和oblique三個(gè)屬性值. css代碼如下:
font-stye:normal;
font-stye:italic;
font-stye:oblique;
表現(xiàn)如下:
normal italic oblique
可以看到italic和oblique都是向右傾斜的文字, 但區(qū)別在于Italic是指斜體字，而Oblique是傾斜的文字，對(duì)于沒(méi)有斜體的字體應(yīng)該使用Oblique屬性值來(lái)實(shí)現(xiàn)傾斜的文字效果。主要用于一些需要區(qū)別于正文的備注說(shuō)明文字.
3. font-variant: 包括normal和small-caps兩種屬性值. 非英文用戶可能很少用到這個(gè)屬性. small-caps是指小型大寫字母, 是介于大寫字母和小寫字母之間的一種字母表現(xiàn)形式, css代碼如下:
font-variant: normal;
font-variant: small-caps;
表現(xiàn)如下:
NORMAL small-caps
可以看到小型大寫字母比正常的大寫字母要矮一截, 需要注意的是, 要實(shí)現(xiàn)此效果, html中的中必須使用小寫字母, 在css中用font-variant:small-caps;就能自動(dòng)轉(zhuǎn)化為小型大寫, 否則就會(huì)顯示為正常的大寫字母.
4. font-weight: 包括normal和bold兩種屬性值. blod屬性值即指粗體. css代碼如下:
font-weight: normal;
font-weight: bold;
表現(xiàn)如下:
normal bold
5. font-size: 用于控制字體大小的屬性, 屬性值的單位主要有px, pt, cm, mm, %, em, 其中pt, cm, mm為字體絕對(duì)大小單位,px, %, em為相對(duì)大小單位. 這兩種單位各有裨益, 絕對(duì)大小單位的優(yōu)勢(shì)在于, 不管用戶的瀏覽器設(shè)置如何, 均能保持原有的設(shè)計(jì)樣式, 但對(duì)于一些有閱讀障礙, 習(xí)慣于大字體的用戶就顯得有點(diǎn)死板. 而相對(duì)大小單位雖然在可讀性上有優(yōu)勢(shì), 但網(wǎng)頁(yè)界面容易被增大的字體所沖散.
在這里, 限于篇幅就不再解釋每個(gè)單位的區(qū)別和用法. 可以參考Length units.
這里只是強(qiáng)調(diào)一點(diǎn), 如果你的網(wǎng)頁(yè)主要是在電腦屏幕上顯示, 首推px作為你的首選單位, 因?yàn)閜x能夠精確地表示元素在屏幕中的位置和大小. 如果你的網(wǎng)頁(yè)主要用于打印, 則推薦使用絕對(duì)單位pt(1pt=1/72英寸)來(lái)作為首選單位, 這是因?yàn)椴还芷聊坏姆直媛适嵌嗌? 打印出來(lái)的大小都是一樣的.
Summary: 現(xiàn)在總結(jié)一下font的屬性, 如果想讓”Font Property”表現(xiàn)為32px, 行高為150%, 粗體, 斜體, 字體為Georgia, 字組為serif, 代碼如下:
font-size: 32px;
line-height: 1.5;
font-style: italic;
font-weight: bold;
font-family: Georgia, serif;
簡(jiǎn)寫為:
font: italic bold 32px/1.5 Georgia,serif;
表現(xiàn)如下:
Font Property
出處：Jorux Notebook
責(zé)任編輯：moby
上一頁(yè) css基礎(chǔ)教程屬性篇之二 [1] 下一頁(yè) css基礎(chǔ)教程屬性篇之二 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) css基礎(chǔ)教程屬性篇之二 [2]
