CSS字體選擇問題

　

　　在西方國家的字母體系，分紅兩大字族：serif 及 sans serif。其中 typewriter 打字機字體，雖然也是 sans serif，但因爲他是等距字，因此另獨立出一個 Typewriter 字族出來。serif 的意思是，在字的筆畫開始及結束的地方有額外的裝飾，並且筆畫的粗細會因直橫的不一樣而有不一樣。相反的，sans serif 就沒有這些額外裝飾，並且筆畫粗細大體上是差很少。一爲有襯線字體，二爲無襯線。

　　在中文的情形也是有至關於 serif 的字體，例如明（宋）體就是 serif 的，他一般是和 Times Roman 字族來搭配的。而黑體、圓體就至關因而 sans serif 的字體。在中文直排的狀況，比較不容易顯現 serif/sans serif 之間的差別性，可是在目前中文橫排至關的廣泛的情形下，以上所述及的易讀性、醒目性也是適用於中文。

 

一、Arial字體

　　Arial是一套隨同多套微軟應用軟件所分發的無襯線體TrueType字型。雖然比例及字重（weight）和Helvetica極之相近，但 Arial實際上是Monotype Grotesque系列的變種。設計Arial時考慮到會在電腦上面使用，在字體及字距上都做了一些細微的調整和變更，以增長它在電腦屏幕上不一樣分辨率下的可讀性。

　　Arial 經常跟Helvetica 搞混，也常被看成是沒有Helvetica 時的替代字體使用。事實上Arial 確實就是故意作得跟Helvetica 很類似，連每一個字母的寬度都刻意作得如出一轍。

　　Arial 與Helvetica 有一個差別，雖然差別不大，Arial 擁有比Helvetica 更大的字腔與字間。若用排版在展現文字(display) 用途， Arial 排起來比起Helvetica，就是有種神祕的鬆鬆垮垮的感受，理由之一就是由於Arial 白空間取得比較鬆，讓它比較適合用在（低解析度的）內文排版上。請記得他是爲了240dpi 的雷射印表機設計的。它與Helvetica 字母寬度相同，但字間取得比較大，固然每一個字都稍微窄一點，或是線有稍微細一點。很～～仔細看的話，Arial 排版的灰度會稍微比較明亮一點。真的差別不是很大，但這也是與Helvetica 設計意圖不一樣的地方。

Arial 與Helvetica 重疊在一塊兒的圖。 共通的部分塗白，黑色的Helvetica 多出來部分的面積比較多，由此能夠看出它線條比較粗，排版時的灰度也會比較深

接下來看看在各個瀏覽器中的表現：

IE6	IE7	IE8	IE9
firefox	chrome	safari

二、Georgia字體

　　Georgia是一種襯線字體，爲著名字型設計師馬修·卡特（Matthew Carter）於1993年爲微軟所設計的做品，具備在小字下仍能清晰辨識的特性，可讀性十分優良。Georgia的字符線條較粗，襯線部份也比較鈍而平。另外在數字部份也很是不一樣，Georgia採用稱爲「不齊線數字」的數字，特點在於數字會像西文字母般有高矮大小之別。下面是數字顯示效果，很是適合於顯示文章閱讀數：1234567890

接下來看看在各個瀏覽器中的表現：

IE6	IE7	IE8	IE9
firefox	chrome	safari

三、Tahoma字體

　　Tahoma是一個十分常見的無襯線字體，字體結構和Verdana很類似，其字符間距較小，並且對Unicode字集的支援範圍較大。Tahoma和Verdana師出同門，同爲名設計師馬修·卡特的做品，由微軟在1999年推出。許多不喜歡Arial字體的人經常會改用Tahoma來代替，除了是由於Tahoma很容易取得以外，也是由於Tahoma沒有一些Arial爲人詬病的缺點，例如大寫「I」與小寫「l」難以分辨等。Tahoma被採用爲Windows 2000、Windows XP、Windows Server 2003及Sega遊戲主機Dreamcast等系統的默認字型。Tahoma是種很是圓滑的字體。
　　Tahoma只能顯示英文（也就是會所英文才有tahoma的字體效果），對於中文字體，會自動採用宋體這個默認字體來顯示

IE6	IE7	IE8	IE9
firefox	chrome	safari

 

四、Lucida Console字體

　　Lucida Console是一種OpenType型的無襯線字體。1993年製做並隨微軟公司的Windows NT 3.1操做系統發佈。有較大的x字高，具備很好的可讀性，被普遍用於顯示、出版等各類用途。

IE6	IE7	IE8	IE9
firefox	chrome	safari

 

五、宋體

IE6	IE7	IE8	IE9
firefox	chrome	safari

 

六、微軟雅黑

IE6	IE7	IE8	IE9
firefox	chrome	safrai

七、Verdana

　　Verdana是一套無襯線字體，它在小字上有結構清晰端整、閱讀辨識容易等高品質表現，成爲許多領域愛用的標準字型之一。此字體設計源起於微軟字型設計小組的維吉尼亞·惠烈（Virginia Howlett）但願設計一套具備高辨識性、易讀性的新字型以供屏幕顯示之用，因而她邀請了世界頂級字型設計師之一的馬修·卡特（Matthew Carter）操刀，以Frutiger字體及愛德華·約翰斯頓（Edward Johnston）爲倫敦地鐵所設計的字體爲藍本，並由Monotype公司的字型微調專家湯姆·瑞克納（Tom Rickner）擔任手工微調，字體結構與Tahoma（同爲馬修·卡特所設計）很類似。「Verdana」一名是由「verdant」和「Ana」兩字所組成的。「verdant」意爲「蒼翠」，象徵着「翡翠之城」西雅圖及有「常青州」之稱的華盛頓州。「Ana」則來自於維吉尼亞·惠烈大女兒的名字。

IE6	IE7	IE8	IE9
firefox	chrome	safari

 

如下爲各個大型網站的body的字體設置：

人人網：body{font-family:Tahoma,Verdana,STHeiTi,simsun,sans-serif;}

騰訊網：body{font-family:"宋體","Arial Narrow";}

淘寶網：body{font-family:12px/1.5 tahoma,arial,'Hiragino Sans GB',宋體,sans-serif}

開心網：body{font-family:tahoma,helvetica,arial,'bitstream vera sans',sans-serif}

新浪微博：body{font-family:12px/1.125 Arial,Helvetica,sans-serif}

 

中文字體與英文、unicode 對應表

中文名	英文名	Unicode
Mac OS
華文細黑	STHeiti Light [STXihei]	534E65877EC69ED1
華文黑體	STHeiti	534E65879ED14F53
華文楷體	STKaiti	534E658769774F53
華文宋體	STSong	534E65875B8B4F53
華文仿宋	STFangsong	534E65874EFF5B8B
麗黑 Pro	LiHei Pro Medium	4E3D9ED1 Pro
麗宋 Pro	LiSong Pro Light	4E3D5B8B Pro
標楷體	BiauKai	680769774F53
蘋果麗中黑	Apple LiGothic Medium	82F9679C4E3D4E2D9ED1
蘋果麗細宋	Apple LiSung Light	82F9679C4E3D7EC65B8B
Windows
新細明體	PMingLiU	65B07EC6660E4F53
細明體	MingLiU	7EC6660E4F53
標楷體	DFKai-SB	680769774F53
黑體	SimHei	9ED14F53
宋體	SimSun	5B8B4F53
新宋體	NSimSun	65B05B8B4F53
仿宋	FangSong	4EFF5B8B
楷體	KaiTi	69774F53
仿宋_GB2312	FangSong_GB2312	4EFF5B8B_GB2312
楷體_GB2312	KaiTi_GB2312	69774F53_GB2312
微軟正黑體	Microsoft JhengHei	5FAEx8F6F6B639ED14F53
微軟雅黑	Microsoft YaHei	5FAE8F6F96C59ED1
Office
隸書	LiSu	96B64E66
幼圓	YouYuan	5E7C5706
華文細黑	STXihei	534E65877EC69ED1
華文楷體	STKaiti	534E658769774F53
華文宋體	STSong	534E65875B8B4F53
華文中宋	STZhongsong	534E65874E2D5B8B
華文仿宋	STFangsong	534E65874EFF5B8B
方正舒體	FZShuTi	65B96B6382124F53
方正姚體	FZYaoti	65B96B6359DA4F53
華文彩雲	STCaiyun	534E65875F694E91
華文琥珀	STHupo	534E6587742573C0
華文隸書	STLiti	534E658796B64E66
華文行楷	STXingkai	534E6587884C6977
華文新魏	STXinwei	534E658765B09B4F

頁面的附件能夠在這裏下載：

font.rar