css字型屬性

Author: Jorux/Bluecssr Posted on: September 11, 2006 Filed under: Web Design Comments: 18 Responses keywords: css, tutorial FontSize: + Increase - Decreaseedit
上次主要說明了css對於顏色和文字屬性的控制, 這次介紹css對於字型, 背景等屬性的控制.

字型(Font):css控制的字型屬性包括font-family, font-style, font-variant, font-weight, font-size.

1.font-family: 由字型名(family-names)和字組名(generic families)兩個部分組成.首先來看個執行個體,例:查看Jorux.com首頁的css檔案,可以看到以下代碼:

[Copy to clipboard]

CODE:

body {
font: normal 12px/1.5 Georgia, sans-serif;
text-align:left;
background:#444 url(images/bodybg.jpg) repeat-y;
}

藍色加亮部分就是font的屬性值, 這種寫法為簡寫, 可將其還原為:

[Copy to clipboard]

CODE:

font-weight: normal;
font-size: 12px;
line-height: 1.5;
font-family: Georgia, sans-serif;

行高(line-height)其實並不屬於font屬性, 但可以在簡寫時歸入font屬性值內. 現在我們先只看最後一行font-family的部分. “Georgia“即為字型名(有simhei, arial, verdana等), “sans-serif“即為字組名(包括襯線字型(Serif), 非襯線字型(Sans-Serif) 和等寬字型(MonoSpace)三種).

由於Windows內建的漢字字型極為有限. 但一般中文Windows系統都支援宋體(預設, SimSun)和黑體(SimHei)和楷體(kaiti_gb2312). 我們來看看這幾種漢字字型(要注意這幾種字型名, 楷體的英文字型名為kaiti_gb2312, Firefox對漢字字型支援不良):

宋體 楷體 黑體 預設

中國人看到西方字型名可能會比較迷惑, 但就如同學習英文時所遇到的英文名一樣, 一些常用的字型名的表現和拼字必須要掌握, 對於中文學習者, 目前只推薦掌握以下幾種英文字型:

Arial Verdana Georgia Courier(知識若不分享 實在沒有意義　http://www.yidabu.com)

這幾種字型的一般用法如下:

1. Arial: 是目前最為流行的本文字型, 幾乎所有的web2.0網站(如Google, Flickr, Wikipedia等)都使用arial字型作為本文甚至是標題的字型. 特點是親和力比較強, 閱讀起來不易疲勞;

2. Verdana: 是1996年微軟邀請頂級字型設計師花了兩年時間出品的字型, 免費提供給windows使用者. 和arial用法比較相似, 是目前使用最為廣泛的字型, 幾乎能在任何地方看到;

3. Georgia: 這個後起之秀, 由於其花哨的襯線(後說明), 被很多網頁設計師所青睞, 逐漸取代了Times New Roman在serif字組中的核心地位. 本網站的標題也使用的是Georgia字型.

4. Courier: 隸屬於Monospace字組, 由於其字母的寬度均一, 一般用於對單詞長度控制比較嚴格的地方, 比如網頁導航條和報紙(印刷品).

英文有那麼多字型, 但都隸屬於serif, sans-serif和monospace三種字組. 由於英文本身的特點, 不同於方塊字(漢字), 英文字母的寬度是不相等的, 這就給出版業如報紙的排版工作增加了難度, 於是發明了等寬字型(monospace).

字組及字型關係圖如下:

現在有必要解釋一下serif和sans-serif的區別. “sans”來源於古法語, 意為”without”, 即”非”. 而”serif”來源於荷蘭語, 譯為襯線, 指字母的拐角或端點位置的修飾線, :

所以非等寬字組又分為有襯線(serif)和無襯線(sans-serif)兩組. verdana和arial均屬於無襯線組.

對於字組和字型的選擇, 其實是很個人化的, 讀者可以根據自己的喜好, 靈活搭配, 但總的原則是不要選取一些罕見的字型, 如果訪問者沒有這種字型的話,就會和你的設計意圖相悖.(知識若不分享 實在沒有意義　http://www.yidabu.com)

例:如font-family的屬性值如下:

font-family: verdana,arial,sans-serif;

瀏覽器首先在字型庫中尋找verdana字型, 如果沒找到則尋找arial字型, 如果還沒找到就在sans-serif字組中的選擇其他字型顯示.

2. font-style: 包括normal, italic和oblique三個屬性值. css代碼如下:

font-stye:normal;
font-stye:italic;
font-stye:oblique;

表現如下:

normal italic oblique

可以看到italic和oblique都是向右傾斜的文字, 但區別在於Italic是指斜體字，而Oblique是傾斜的文字，對於沒有斜體的字型應該使用Oblique屬性值來實現傾斜的文字效果。主要用於一些需要區別於本文的備忘解說文字.

3. font-variant: 包括normal和small-caps兩種屬性值. 非英文使用者可能很少用到這個屬性. small-caps是指小型大寫字母, 是介於大寫字母和小寫字母之間的一種字母表現形式, css代碼如下:

font-variant: normal;
font-variant: small-caps;(知識若不分享 實在沒有意義　http://www.yidabu.com)

表現如下:

NORMAL small-caps

可以看到小型大寫字母比正常的大寫字母要矮一截, 需要注意的是, 要實現此效果, html中的中必須使用小寫字母, 在css中用font-variant:small-caps;就能自動轉化為小型大寫, 否則就會顯示為正常的大寫字母.

4. font-weight: 包括normal和bold兩種屬性值. blod屬性值即指粗體. css代碼如下:

font-weight: normal;
font-weight: bold;

表現如下:

normal bold

5. font-size: 用於控制字型大小的屬性, 屬性值的單位主要有px, pt, cm, mm, %, em, 其中pt, cm, mm為字型絕對大小單位,px, %, em為相對大小單位. 這兩種單位各有裨益, 絕對大小單位的優勢在於, 不管使用者的瀏覽器設定如何, 均能保持原有的設計樣式, 但對於一些有閱讀障礙, 習慣於大字型的使用者就顯得有點死板. 而相對大小單位雖然在可讀性上有優勢, 但網頁介面容易被增大的字型所衝散.

在這裡, 限於篇幅就不再解釋每個單位的區別和用法. 可以參考Length units.

這裡只是強調一點, 如果你的網頁主要是在電腦螢幕上顯示, 首推px作為你的首選單位, 因為px能夠精確地表示元素在螢幕中的位置和大小. 如果你的網頁主要用於列印, 則推薦使用絕對單位pt(1pt=1/72英寸)來作為首選單位, 這是因為不管螢幕的解析度是多少, 列印出來的大小都是一樣的.(知識若不分享 實在沒有意義　http://www.yidabu.com)

Summary: 現在總結一下font的屬性, 如果想讓”Font Property”表現為32px, 行高為150%, 粗體, 斜體, 字型為Georgia, 字組為serif, 代碼如下:

font-size: 32px;
line-height: 1.5;
font-style: italic;
font-weight: bold;
font-family: Georgia, serif;

簡寫為:

font: italic bold 32px/1.5 Georgia,serif;

表現如下:

Font Property

--------------------------------------------------------------------------------

背景(background): 包括background-color, background-image, background-repeat, background-attachment, background-position五種屬性.

1. background-color: 指背景顏色, 其屬性值有三種形式, 十六進位, 顏色名稱, rgb值. 目前最為常用的是”#+十六進位數”. 例: 本站顯示代碼的段落背景為#EEEEEE的灰色, 代碼及樣本如下:

background-color: #EEEEEE;(知識若不分享 實在沒有意義　http://www.yidabu.com)

2. background-image: 指背景圖片, 其屬性值為背景圖片的地址, 代碼和格式如下:

background-image: url(http://jorux.com/back.png);

例: 本站首頁的第一篇文章標題前有個”NEW”表徵圖, 查看css可見如下代碼:

#homeheadline a{
color:#444;
padding: 30px 68px 0 40px;
margin:0;
background:url(images/new.png) no-repeat 0 16px ;
}
3. background-repeat: 指背景圖片的重複與否以及重複方式, 有no-repeat, repeat, repeat-x, repeat-y四種屬性值.

no-repeat: 即無論背景圖片的大小, 只顯示單個背景圖片, 如首頁的第一篇文章標題前的”NEW”表徵圖, 代碼如上所示;

repeat: 指背景圖片橫向和縱向重複連續顯示;

repeat-x: 指背景圖片橫向重複連續顯示;

repeat-y 指背景圖片縱向重複連續顯示;例: 查看本站css檔案,可以看到以下代碼:

body {
font: normal 12px/1.5 Georgia, sans-serif;
text-align:left;
background:#444 url(images/bodybg.jpg) repeat-y;
}
可以看到背景圖片bodybg.jpg是縱向重複顯示的, 並隨頁面的長度的增加而增加.(知識若不分享 實在沒有意義　http://www.yidabu.com)

4. background-attachment: 指背景圖片的附著方式, 有scroll(預設屬性)和fixed兩種屬性值. scroll指背景圖片隨頁面的滾動而滾動, 而fixed屬性值則可使背景圖片固定於瀏覽器的某個位置, 不隨頁面滾動而滾動. 如下例所示, 您可以試著滾動本頁面來看看兩圖的差別, 左邊為scroll, 右邊為fixed(請用IE觀看以下示範):(知識若不分享 實在沒有意義　http://www.yidabu.com)

X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X XX X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X
5.background-position: 指背景圖片的位置屬性. 屬性值可以有百分比, 位置名稱和具體數值三種形式, 如所示(藍色部分表示距離左邊框的資料, 黑色部分表示距離上邊框的資料):

可以看到, 要使背景圖片位於左上方有三種方法, 代碼如下:

background-position: 0% 0%;
background-position: top left;
background-position: 0 0;

實際上, 不聲明此屬性, 即預設背景圖片為左上方顯示. 值得注意的是, 當用屬性值為位置名稱時, 先寫距離上邊框的資料(top), 後寫距離左邊框的資料(left). 而當用百分比或是具體數值表示時, 則反過來寫.請讀者仔細看看的藍色和黑色部分的順序.

不要小看這個屬性, 在導航條的製作中, 這個屬性將是實現一些動態變化的關鍵手段(將在以後的執行個體篇中說明).

Summary: 現在總結一下background的屬性, 如果想讓某背景圖片表現為固定, 位於右上方, 不重複, 背景顏色為#CCC, 代碼如下:

background-image: url(http://static.flickr.com/86/240223091_dc1dce25a5_m.jpg);
background-color: #CCC;
background-attachment: fixed;
background-position: top right;
background-repeat: no-repeat;

簡寫為:

background: url(http://static.flickr.com/86/240223091_dc1dce25a5_m.jpg) #CCC fixed no-repeat top right;

表現如下(請用IE觀看以下示範):(知識若不分享 實在沒有意義　http://www.yidabu.com)

X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X
--------------------------------------------------------------------------------

本篇本文完.

原以為可以多寫幾個屬性的, 沒想到字型和背景兩個屬性就寫了這麼長, 在體力和精神上都已經到了極限, 暫寫到這, 其餘的還看下回更新.

 

 

BLOG上使用的英文字型

一些寫英文的blog，通常都不太注意這個問題。所用字型一律是預設的Arial，殊不知Arial字型是電腦上辨識效果最差的一種字型，比如大寫 I和小寫L，幾乎分不清。還有那個字型效果胖乎乎的verdana字型，美觀效果也不好，我似乎還沒有發覺有外語書籍使用這兩種字型的。如果不是因為 Arial字型是A打頭，它一定不會出現在字型選擇的第一個上。我甚至都覺得這種字型應該刪掉算了。

一般來說，用在網頁上的英文字型，Georigia字型不錯，辨識效果好，國外的一些網站和BLOG，幾乎都用這種字型。我也喜歡這種字型，不僅美觀，主要是適合閱讀。

如果是印刷品的話，Georigia也可以，不過Garamond用的更多，幾乎是流行的本文字型，用這個字型沒人會說什麼。