如何優雅的選擇字型(font-family)
大家都知道，在不同作業系統、不同遊覽器裡面預設顯示的字型是不一樣的，並且相同字型在不同作業系統裡面渲染的效果也不盡相同，那麼如何設定字型顯示效果會比較好呢？下面我們逐步的分析一下：
一、首先我們看看各平臺的預設字型情況
1、Window下：
-
宋體（SimSun）：Win下大部分遊覽器的預設字型，
宋體在小字號下（如12px、14px）的顯示效果還可以接受，但是字號一大就非常糟糕了，所以使用的時候要注意。 -
微軟雅黑（"Microsoft Yahei"）：從 Vista 開始，微軟提供了這款新的字型，一款無襯線的黑體類字型，並且擁有Regular、Bold 兩種粗細的字重，顯著提高了字型的顯示效果。現在這款字型已經成為Windows遊覽器中最值得使用的中文字型。從Win8開始，
微軟雅黑又加入了 Light 這款更細的字重，對於喜歡細字型的設計、開發人員又多了一個新的選擇。 -
Arial：Win平臺上預設的無襯線西文字型（為什麼要說英文字型後面會解釋），有多種變體，顯示效果一般。
-
Tahoma：十分常見的無襯線字型，被採用為Windows 2000、Windows XP、Windows Server 2003及Sega遊戲主機Dreamcast等系統的預設字型，顯示效果比
Arial要好。 -
Verdana：無襯線字型，優點在於它在小字上仍結構清晰端整、閱讀辨識容易。
-
結論：
微軟雅黑為Win平臺上最值得選擇的中文字型，但非遊覽器預設，需要設定；西文字型的選擇以Arial、Tahoma等無襯線字型為主。
2、Mac OS下：
-
華文黑體（STHeiti）、華文細黑（STXihei）：屬於同一字型家族系列，OS X 10.6 之前的簡體中文系統介面預設字型，也是目前Chrome遊覽器下的預設字型，有 Regular 和 Bold 兩個字重，顯示效果可以接受，
華文細黑也曾是我最喜歡的字型之一。 -
黑體-簡（Heiti SC）：從 10.6 開始，
黑體-簡代替華文黑體用作簡體中文系統介面預設字型，蘋果生態最常用的字型之一，包括iPhone、iPad等裝置用的也是這款字型，顯示效果不錯，但是喇叭口設計遭人詬病。 -
冬青黑體（ Hiragino Sans GB ）：聽說又叫
蘋果麗黑，日文字型Hiragino KakuGothic的簡體中文版，簡體中文有 常規體和 粗體 兩種，冬青黑體是一款清新的專業印刷字型，小字號時足夠清晰，擁有很多人的追捧。 -
Times New Roman：Mac平臺Safari下預設的字型，是最常見且廣為人知的西文襯線字型之一，眾多網頁瀏覽器和文書處理軟體都是用它作為預設字型。
-
Helvetica、Helvetica Neue：一種被廣泛使用的傳奇般的西文字型（這貨還有專門的記錄片呢），在微軟使用山寨貨的
Arial時，喬布斯卻花費重金獲得了Helvetica蘋果系統上的使用權，因此該字型也一直伴隨著蘋果使用者，是蘋果生態中最常用的西文字型。Helvetica Neue為Helvetica的改善版本，且增加了更多不同粗細與寬度的字形，共擁有51種字型版本，極大的滿足了日常的使用。 -
蘋方（PingFang SC）：在Mac OS X EL Capitan上，蘋果為中國使用者打造了一款全新中文字型--
蘋方，去掉了為人詬病的喇叭口，整體造型看上去更加簡潔，字族共六枚字型：極細體、纖細體、細體、常規體、中黑體、中粗體。 -
San Francisco：同樣是Mac OS X EL Capitan上最新發布的西文字型，感覺和
Helvetica看上去差別不大，目前已經應用在Mac OS 10.11+、iOS 9.0+、watch OS等最新系統上。 -
結論：目前
蘋方和San Francisco為蘋果推出的最新字型，顯示效果也最為優雅，但只有最新系統才能支援，而黑體-簡和Helvetica可以獲得更多系統版本支援，顯示效果也相差無幾，可以接受。
3、Android系統：
-
Droid Sans、Droid Sans Fallback：
Droid Sans為安卓系統中預設的西文字型，是一款人文主義無襯線字型，而Droid Sans Fallback則是包含漢字、日文假名、韓文的文字擴充套件支援。 -
結論：
Droid Sans為預設的字型，並結合了中英文，無需單獨設定。
4、iOS系統：
-
iOS系統的字型和Mac OS系統的字型相同，保證了Mac上的字型效果，iOS裝置就沒有太大問題。
5、Linux：
-
文泉驛點陣宋體：類似
宋體的襯線字型，一般不推薦使用。 -
文泉驛微米黑：幾乎是 Linux 社群現有的最佳簡體中文字型。
二、選擇字型需要注意的問題
1、字型的中英文寫法：
我們在作業系統中常常看到宋體、微軟雅黑這樣的字型名稱，但實際上這只是字型的顯示名稱，而不是字型檔案的名稱，一般字型檔案都是用英文命名的，如SimSun、Microsoft
Yahei。在大多數情況下直接使用顯示名稱也能正確的顯示，但是有一些使用者的特殊設定會導致中文宣告無效。
因此，保守的做法是使用字型的字型名稱（英文）或者兩者兼寫。如下示例：
font-family: STXihei, "Microsoft YaHei";
font-family: STXihei, "華文細黑", "Microsoft YaHei", "微軟雅黑";2、宣告英文字型：
絕大部分中文字型裡都包含英文字母和數字，不進行英文字型宣告是沒有問題的，但是大多數中文字型中的英文和數字的部分都不是特別漂亮，所以建議也對英文字型進行宣告。
由於英文字型中大多不包含中文，我們可以先進行英文字型的宣告，這樣不會影響到中文字型的選擇，因此優先使用最優秀的英文字型，中文字型宣告則緊隨其次。如下示例：
font-family: Arial, "Microsoft YaHei";3、照顧不同的作業系統：
-
英文、數字部分：在預設的作業系統中，Mac和Win都會帶有
Arial,Verdana,Tahoma等幾個預裝字型，從顯示效果來看，Tahoma要比Arial更加清晰一些，因此字型設定Tahoma最好放到前面，當找不到Tahoma時再使用Arial；而在Mac中，還擁有一款更加漂亮的Helvetica字型，所以為了照顧Mac使用者有更好的體驗，應該更優先設定Helvetica字型；Android系統下預設的無襯線字型就可以接受，因此無需單獨設定。最後，英文、數字字型的最佳寫法如下：
font-family: Helvetica, Tahoma, Arial;-
中文部分：在Win下，
微軟雅黑為大部分人最常使用的中文字型，由於很多人安裝Office的緣故，Mac電腦中也會出現微軟雅黑字型，因此把顯示效果不錯的微軟雅黑加入到字型列表是個不錯的選擇；同樣，為了保證Mac中更為優雅字型蘋方（PingFang SC）、黑體-簡（Heiti SC）、冬青黑體（ Hiragino Sans GB ）的優先顯示，需要把這些字型放到中文字型列表的最前面；同時為了照顧到Linux作業系統的體驗，還需要新增文泉驛微米黑字型。最後，中文字型部分最佳寫法如下：
font-family: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";中英文整合寫法：
font-family: Helvetica, Tahoma, Arial, "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";
font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";4、注意向下相容
如果還需要考慮舊版本作業系統使用者的話，不得不加上一些舊版作業系統存在的字型：Mac中的華文黑體、冬青黑體，Win中的黑體等。同樣按照顯示效果排列在列表後面，寫法如下：
font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", STXihei, "MicrosoftYaHei", SimHei, "WenQuanYi Micro Hei";
加入了 STXihei（華文細黑）和 SimHei（黑體）。
5、補充字型族名稱
字型族大體上分為兩類：sans-serif（無襯線體）和serif（襯線體），當所有的字型都找不到時，我們可以使用字型族名稱作為作業系統最後選擇字型的方向。一般非襯線字型在顯示器中的顯示效果會比較好，因此我們需要在最後新增 sans-serif，寫法如下：。
font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;三、我們看一下大公司的常見寫法（2016.07檢視）
1、小米
font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYiMicro Hei",sans-serif;
小米公司優先使用Helvetica Neue這款字型以保證最新版本Mac使用者的最佳體驗，選擇了Arial作為Win下預設英文字型及Mac的替代英文字型；中文字型方面首選了微軟雅黑，然後選擇了冬青黑體及黑體-簡作為Mac上的替代方案；最後使用文泉驛微米黑兼顧了Linux系統。
2、淘寶
鑑於淘寶網改版頻率較頻繁，這裡截圖儲存了一下，點此檢視。
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
其實從圖中明顯看出淘寶網的導航及內容有著大量的襯線字型，鑑於淘寶網站大部分字號比較小，顯示效果也還可以接受。程式碼中可以看出淘寶使用了Tahoma、Arial作為首選英文字型，中文字型首選了冬青黑體，由於Win下沒有預裝該款字型，所以顯示出了後面的宋體（5b8b4f53為漢字宋體用
unicode 表示的寫法，不用SimSun是因為 Firefox 的某些版本和 Opera 不支援 SimSun的寫法）
3、簡書
font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
自認為簡書的閱讀體驗很棒，我們看看簡書所用的字型，簡書優先選擇了lucida家族的系列字型作為英文字型，該系列字型在Mac和Win上都是預裝的，並且有著不俗的表現；中文字型方面將冬青黑體作為最優先使用的字型，同樣考慮了Linux系統。
各大公司的字型設定大同小異，這裡不再一一舉例檢視，有興趣的可以自己多多檢視。
四、其他的一些注意點
1、字型何時需要新增引號
當字型具體某個取值中若有一種樣式名稱包含空格，則需要用雙引號或單引號表示，如：
font-family: "Microsoft YaHei", "Arial Narrow", sans-serif;如果書寫中文字型名稱為了保證相容性也會新增引號，如：
font-family: "黑體-簡", "微軟雅黑", "文泉驛微米黑";2、引用外部字型
大多數的中文字型由於版權原因不能隨意使用，這裡推薦一個免版權而且漂亮的中文字型思源黑體，該字型為Adobe與Google推出的一款開源字型，
有七種字型粗細（ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy），完全支援日文、韓文、繁體中文和簡體中文，字形優美，依稀記得小米公司好像有使用過。
鑑於中文字型的體積比較大（一般字型檔全一點的中文字型動輒幾Mb），所以較少人會使用外部字型，如果真的需要引入，也可以考慮通過工具根據頁面文字的使用多少單獨生成中文字型，以減小檔案大小。
五、最後，推薦寫法
由於每個人的審美不一樣，鍾愛的字型也會有所有不同，這裡給出我個人的常用寫法：
font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "WenQuanYi Micro Hei", sans-serif;另外推薦兩個github上的關於中文字型和排版的專案：