如何設置 font-family 比較好？
font-family: sans-serif。
這行代碼設置全部字體爲系統默認的無稱線字體。若是在各類操做系統和瀏覽器都作對的狀況下，它應該對中英文使用默認的無稱線字體。即大多數狀況下英文顯示『Arial』或『Helvatica』，中文顯示『黑體』或『微軟雅黑』，日文顯示『哥特體』。固然，也能夠設置font-family: serif。那麼相應的就是『Times』、『宋體』和『明朝』。
很惋惜這項設置只能在Mac和Windows8下正確顯示。在其它Windows下實際上是無效的。緣由以下：
- 除了Win8之外的Windows都會錯誤地使用宋體（稱線字體）顯示。（其實也沒問題，只是那些想用雅黑顯示的網頁就沒戲了）
- Windows XP及之前的操做系統上黑體顯示的中文字很是難看不便閱讀。
爲了使問題簡化，在此就討論的條件和範圍說明一下：
注1：貌似某些新版本的瀏覽器可以在Windows上正確分辨中文的稱線和無稱線字體了。
注2：Win8上的IE10彷佛已經修正了對無稱線字體的顯示問題。可是不知道Win7的IE10會怎樣。
注3：不討論Windows和Mac之外的操做系統了。
注4：不討論一個網頁內標題和正文使用不一樣中文字體的狀況。
注5：不討論中文、日文和拉丁字母之外的字符。
注6：不討論用戶在瀏覽器的設置中中強行設置字體的狀況。
注7：不討論稱線和無稱線字體之外的狀況，如等寬字體。（由於對中文實際使無效的）
----------------------分析開始----------------------
在給出答案前，先說各類字體的在各類操做系統上現象：
宋體：
- 在Windows操做系統上顯示良好。可是僅限於12像素和14像素。超出14像素的字基本就會出現字不夠方正，鋸齒明顯的現象。
- 在Mac上各類字號均可以很好的顯示。這是由於Mac上針對字體所作的反鋸齒效果作的比較好。
黑體或微軟雅黑：
黑體和微軟雅黑都屬於無稱線字體。
- Windows Vista，Windows 7和Windows 8上在各類字號下顯示良好。可是僅就閱讀來售，雅黑在Windows下不大適合作大段閱讀，由於會出現明顯的字體歪歪扭扭的現象。雅黑比較適合作UI字體，好比按鈕、導航、菜單。大號字體下用以顯示標題也不錯。所以咱們看到不少新網站都開始使用雅黑了。
- Mac：黑體沒有任何問題。雖然有些人號稱看蘋果上的黑體字很不習慣。可是我的以爲仍是最適合閱讀的字體。並且也適合作UI字體。
- Windows XP及之前的Windows：這裏就比較複雜了。由於：
1) Windows XP原生是不帶微軟雅黑的。
2) 加裝Office 2007後會加裝微軟雅黑。
3) Windows XP的Clear Type作的很是很差，致使雅黑在Windows XP上的顯示效果基本沒法閱讀。
爲了發揮雅黑的好處，同時解決兼容性問題，我在服務器端針對各類不一樣的操做系統作了不一樣的判斷。以下：瀏覽器
- Windows XP及之前版本的Windows
font-family: Arial, 宋體, sans-serif;
- Windows Vista和Windows 7
Sorry，英文就沒法設置字體了，由於中文字體都包含了英文字體。好在雅黑顯示英文還湊合。font-family: 'Microsoft Yahei', sans-serif;
- Mac及其它操做系統
font-family: sans-serif;
其實這還不夠好，由於在Windows下，正文使用宋體顯示比較合適。個人下一步的計劃是：服務器
- 針對Windows下的正文使用宋體。
- 針對雅黑字體，用13px和15px等奇數字體顯示，由於效果更好。
CSS 定義了 5 種通用字體系列字體
- Serif 字體
- Sans-serif 字體
- Monospace 字體
- Cursive 字體
- Fantasy 字體
- Serif 字體
- 這些字體成比例，並且有上下短線。若是字體中的全部字符根據其不一樣大小有不一樣的寬度，則成該字符是成比例的。例如，小寫 i 和小寫 m 的寬度就不一樣。上下短線是每一個字符筆劃末端的裝飾，好比小寫 l 頂部和底部的短線，或大寫 A 兩條腿底部的短線。Serif 字體的例子包括 Times、Georgia 和 New Century Schoolbook。
- Sans-serif 字體
- 這些字體是成比例的，並且沒有上下短線。Sans-serif 字體的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。
- Monospace 字體s
- Monospace 字體並非成比例的。它們一般用於模擬打字機打出的文本、老式點陣打印機的輸出，甚至更老式的視頻顯示終端。採用這些字體，每一個字符的寬度都必須徹底相 同，因此小寫的 i 和小寫的 m 有相同的寬度。這些字體可能有上下短線，也可能沒有。若是一個字體的字符寬度徹底相同，則歸類爲 Monospace 字體，而不管是否有上下短線。Monospace 字體的例子包括 Courier、Courier New 和 Andale Mono。
- Cursive 字體
- 這些字體試圖模仿人的手寫體。一般，它們主要由曲線和 Serif 字體中沒有的筆劃裝飾組成。例如，大寫 A 再其左腿底部可能有一個小彎，或者徹底由花體部分和小的彎曲部分組成。Cursive 字體的例子包括 Zapf Chancery、Author 和 Comic Sans。
- Fantasy 字體
- 這些字體沒法用任何特徵來定義，只有一點是肯定的，那就是咱們沒法很容易地將其規劃到任何一種其餘的字體系列當中。這樣的字體包括 Western、Woodblock 和 Klingon。
理論上講，用戶安裝的任何字體系列都會落入到上述某種通用系列中，但實際上可能並不是如此，不過例外狀況（若是有的話）每每不多。s網站
-----------以上引自W3School編碼
西方國家字母體系分爲兩類：serif以及sans serif。 spa
serif是有襯線字體，意思是在字的筆畫開始、結束的地方有額外的裝飾，並且筆畫的粗細會有所不一樣。相反的，sans serif就沒有這些額外的裝飾，並且筆畫的粗細差很少。 操作系統
serif字體容易識別，它強調了每一個字母筆畫的開始和結束，所以易讀性比較高，sans serif則比較醒目。在走文閱讀的狀況下，適合適用serif字體進行排版，易於換行閱讀的識別性，避免發生行間的閱讀錯誤。 code
sans serif強調每個字母，serif更強調於一個單詞。 視頻
中文字體中的宋體就是一種最標準的serif字體，襯線的特徵很是明顯。字形結構也和手寫的楷書一致。所以宋體一直被作爲最適合的正文字體之一。不過因爲強調橫豎筆畫的對比，在遠處觀看的時候橫線就被弱化，致使識別性的降低 。blog
----------以上引自百度百科
sans serif（非襯線字體）更適合於做爲標題，強調，
serif（襯線字體）更適合於正文。
------------
具體哪些字體是sans serif（非襯線字體），哪些字體是serif（襯線字體），在dreamweaver的CSS提示框中能夠查到，其餘的上網搜索。
------------
引自QQ.com的CSS以下
body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"宋體","Arial Narrow",HELVETICA;background:#fff;}
不難看出，字體大小：12像素，行高22像素，字體：宋體，Arial，Narrow，helvetica
引自taobao.com的CSS以下
body{font:12px/1.5 tahoma,arial,\5b8b\4f53;}
這段CSS的意思爲：字體大小：12像素，行高1.5倍，即150%，1.5*12=18像素，字體：tahoma,arial,\5b8b\4f53，這裏的\5b8b\4f53是漢字"宋體"的Unicode編碼，不採用 SimSun的緣由是 Firefox 的某些版本和 Opera 不支持 SimSun 的寫法。
字體英文，unicode對照表
| 平臺 |
中文名 |
英文名 |
Unicode |
Unicode 2 |
| Windows |
新細明體 |
PMingLiU |
\65B0\7EC6\660E\4F53 |
新细明体 |
| 細明體 |
MingLiU |
\7EC6\660E\4F53 |
细明体 |
|
| 標楷體 |
DFKai-SB |
\6807\6977\4F53 |
标楷体 |
|
| 黑體 |
SimHei |
\9ED1\4F53 |
黑体 |
|
| 宋體 |
SimSun |
\5B8B\4F53 |
宋体 |
|
| 新宋體 |
NSimSun |
\65B0\5B8B\4F53 |
新宋体 |
|
| 仿宋 |
FangSong |
\4EFF\5B8B |
仿宋 |
|
| 楷體 |
KaiTi |
\6977\4F53 |
楷体 |
|
| 仿宋_GB2312 |
FangSong_GB2312 |
\4EFF\5B8B_GB2312 |
仿宋_GB2312; |
|
| 楷體_GB2312 |
KaiTi_GB2312 |
\6977\4F53_GB2312 |
楷体_GB2312; |
|
| 微軟正黑體 |
Microsoft JhengHei |
\5FAE\x8F6F\6B63\9ED1\4F53 |
微软正黑体 |
|
| 微軟雅黑 |
Microsoft YaHei |
\5FAE\8F6F\96C5\9ED1 |
微软雅黑 |
|
| Mac OS
|
華文細黑 |
STHeiti Light [STXihei] |
\534E\6587\7EC6\9ED1 |
华文细黑 |
| 華文黑體 |
STHeiti |
\534E\6587\9ED1\4F53 |
华文黑体 |
|
| 華文楷體 |
STKaiti |
\534E\6587\6977\4F53 |
华文楷体 |
|
| 華文宋體 |
STSong |
\534E\6587\5B8B\4F53 |
华文宋体 |
|
| 華文仿宋 |
STFangsong |
\534E\6587\4EFF\5B8B |
华文仿宋 |
|
| 麗黑 Pro |
Pro LiHei Pro Medium |
\534E\6587\7EC6\9ED1 Pro |
丽黑Pro |
|
| 麗宋 Pro |
LiSong Pro Light |
\4E3D\5B8B Pro |
丽宋 Pro |
|
| 標楷體 |
BiauKai |
\6807\6977\4F53 |
标楷体 |
|
| 蘋果麗中黑 |
Apple LiGothic Medium |
\82F9\679C\4E3D\4E2D\9ED1 |
苹果丽中黑 |
|
| 蘋果麗細宋 |
Apple LiSung Light |
\82F9\679C\4E3D\7EC6\5B8B |
苹果丽细宋 |
|
| Office
|
隸書 |
LiSu |
\96B6\4E66 |
隶书 |
| 幼圓 |
YouYuan |
\5E7C\5706 |
幼圆 |
|
| 華文細黑 |
STXihei |
\534E\6587\7EC6\9ED1 |
华文细黑 |