原文:http://jorux.com/archives/property-2-if-you-love-css/
上次主要說(shuō)明了css對(duì)于顏色和文本屬性的控制, 這次介紹css對(duì)于字體, 背景等屬性的控制.
字體(Font) css控制的字體屬性包括font-family, font-style, font-variant, font-weight, font-size.
1.font-family:
由字體名(family-names)和字組名(generic families)兩個(gè)部分組成.首先來(lái)看個(gè)實(shí)例,例:查看Jorux.com首頁(yè)的css文件,可以看到以下代碼:
body { font: normal 12px/1.5 Georgia, sans-serif; text-align:left; background:#444 url(images/bodybg.jpg) repeat-y; }
藍(lán)色加亮部分就是font的屬性值, 這種寫法為簡(jiǎn)寫, 可將其還原為:
font-weight: normal; font-size: 12px; line-height: 1.5; font-family: Georgia, sans-serif;
行高(line-height)其實(shí)并不屬于font屬性, 但可以在簡(jiǎn)寫時(shí)歸入font屬性值內(nèi). 現(xiàn)在我們先只看最后一行font-family的部分. “Georgia“即為字體名(有simhei, arial, verdana等), “sans-serif“即為字組名(包括襯線字體(Serif), 非襯線字體(Sans-Serif) 和等寬字體(MonoSpace)三種).
由于Windows自帶的漢字字體極為有限. 但一般中文Windows系統(tǒng)都支持宋體(默認(rèn), SimSun)和黑體(SimHei)和楷體(kaiti_gb2312). 我們來(lái)看看這幾種漢字字體(要注意這幾種字體名, 楷體的英文字體名為kaiti_gb2312, Firefox對(duì)漢字字體支持不良):
宋體 楷體 黑體 默認(rèn)
中國(guó)人看到西方字體名可能會(huì)比較迷惑, 但就如同學(xué)習(xí)英文時(shí)所遇到的英文名一樣, 一些常用的字體名的表現(xiàn)和拼寫必須要掌握, 對(duì)于中文學(xué)習(xí)者, 目前只推薦掌握以下幾種英文字體:
Arial Verdana Georgia Courier
這幾種字體的一般用法如下:
- Arial: 是目前最為流行的正文字體, 幾乎所有的web2.0站點(diǎn)(如Google, Flickr, Wikipedia等)都使用arial字體作為正文甚至是標(biāo)題的字體. 特點(diǎn)是親和力比較強(qiáng), 閱讀起來(lái)不易疲勞;
- Verdana: 是1996年微軟邀請(qǐng)頂級(jí)字體設(shè)計(jì)師花了兩年時(shí)間出品的字體, 免費(fèi)提供給windows用戶. 和arial用法比較相似, 是目前使用最為廣泛的字體, 幾乎能在任何地方看到;
- Georgia: 這個(gè)后起之秀, 由于其花哨的襯線(后說(shuō)明), 被很多網(wǎng)頁(yè)設(shè)計(jì)師所青睞, 逐漸取代了Times New Roman在serif字組中的核心地位. 本網(wǎng)站的標(biāo)題也使用的是Georgia字體.
- Courier: 隸屬于Monospace字組, 由于其字母的寬度均一, 一般用于對(duì)單詞長(zhǎng)度控制比較嚴(yán)格的地方, 比如網(wǎng)頁(yè)導(dǎo)航條和報(bào)紙(印刷品).
英文有那么多字體, 但都隸屬于serif, sans-serif和monospace三種字組. 由于英文本身的特點(diǎn), 不同于方塊字(漢字), 英文字母的寬度是不相等的, 這就給出版業(yè)如報(bào)紙的排版工作增加了難度, 于是發(fā)明了等寬字體(monospace).
出處:Jorux Notebook
責(zé)任編輯:moby
上一頁(yè) 下一頁(yè) css基礎(chǔ)教程屬性篇之二 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|