[轉(zhuǎn)] 如何優(yōu)雅的選擇字體(font-family)
大家都知道忽刽，在不同操作系統(tǒng)今膊、不同游覽器里面默認(rèn)顯示的字體是不一樣的赖钞，并且相同字體在不同操作系統(tǒng)里面渲染的效果也不盡相同聘裁，那么如何設(shè)置字體顯示效果會(huì)比較好呢献起？下面我們逐步的分析一下：
一谴餐、首先我們看看各平臺(tái)的默認(rèn)字體情況
1鹊碍、Window下：
宋體（SimSun）：Win下大部分游覽器的默認(rèn)字體侈咕，
宋體在小字號(hào)下（如12px、14px）的顯示效果還可以接受，但是字號(hào)一大就非常糟糕了狰住，所以使用的時(shí)候要注意士飒。-
微軟雅黑（"Microsoft Yahei"）：從 Vista 開始缓苛，微軟提供了這款新的字體舌菜，一款無襯線的黑體類字體日月，并且擁有
Regular虱歪、Bold
兩種粗細(xì)的字重，顯著提高了字體的顯示效果。現(xiàn)在這款字體已經(jīng)成為Windows游覽器中最值得使用的中文字體哆姻。從Win8開始解阅，
微軟雅黑又加入了Light
這款更細(xì)的字重，對(duì)于喜歡細(xì)字體的設(shè)計(jì)凉蜂、開發(fā)人員又多了一個(gè)新的選擇煌往。
Arial：Win平臺(tái)上默認(rèn)的無襯線西文字體（為什么要說英文字體后面會(huì)解釋），有多種變體，顯示效果一般院水。
Tahoma：十分常見的無襯線字體场斑，被采用為Windows 2000、Windows XP做葵、Windows Server 2003及Sega游戲主機(jī)Dreamcast等系統(tǒng)的預(yù)設(shè)字型瘫筐，顯示效果比
Arial要好棺禾。Verdana：無襯線字體肆良，優(yōu)點(diǎn)在于它在小字上仍結(jié)構(gòu)清晰端整颊乘、閱讀辨識(shí)容易。
其他：Windows 下默認(rèn)字體列表：微軟官網(wǎng)、維基百科鸵荠、Office字體
結(jié)論：
微軟雅黑為Win平臺(tái)上最值得選擇的中文字體，但非游覽器默認(rèn)渠概，需要設(shè)置疆前；西文字體的選擇以Arial、Tahoma等無襯線字體為主腹侣。
2袖扛、Mac OS下：
-
華文黑體（STHeiti）砸泛、華文細(xì)黑（STXihei）：屬于同一字體家族系列，OS X 10.6 之前的簡體中文系統(tǒng)界面默認(rèn)字體，也是目前Chrome游覽器下的默認(rèn)字體晾嘶，有
Regular
和
Bold
兩個(gè)字重，顯示效果可以接受娶吞，
華文細(xì)黑也曾是我最喜歡的字體之一垒迂。 黑體-簡（Heiti SC）：從 10.6 開始，
黑體-簡代替華文黑體用作簡體中文系統(tǒng)界面默認(rèn)字體妒蛇，蘋果生態(tài)最常用的字體之一机断，包括iPhone、iPad等設(shè)備用的也是這款字體绣夺，顯示效果不錯(cuò)吏奸，但是喇叭口設(shè)計(jì)遭人詬病。-
冬青黑體（ Hiragino Sans GB ）：聽說又叫
蘋果麗黑陶耍，日文字體Hiragino KakuGothic的簡體中文版奋蔚，簡體中文有常規(guī)體和
粗體
兩種，
冬青黑體是一款清新的專業(yè)印刷字體烈钞，小字號(hào)時(shí)足夠清晰泊碑，擁有很多人的追捧。 Times New Roman：Mac平臺(tái)Safari下默認(rèn)的字體毯欣，是最常見且廣為人知的西文襯線字體之一馒过，眾多網(wǎng)頁瀏覽器和文字處理軟件都是用它作為默認(rèn)字體。
Helvetica酗钞、Helvetica Neue：一種被廣泛使用的傳奇般的西文字體（這貨還有專門的記錄片呢）腹忽，在微軟使用山寨貨的
Arial時(shí)，喬布斯卻花費(fèi)重金獲得了Helvetica蘋果系統(tǒng)上的使用權(quán)砚作，因此該字體也一直伴隨著蘋果用戶窘奏，是蘋果生態(tài)中最常用的西文字體。Helvetica Neue為Helvetica的改善版本葫录，且增加了更多不同粗細(xì)與寬度的字形蔼夜，共擁有51種字體版本，極大的滿足了日常的使用压昼。蘋方（PingFang SC）：在Mac OS X EL Capitan上求冷，蘋果為中國用戶打造了一款全新中文字體--
蘋方，去掉了為人詬病的喇叭口窍霞，整體造型看上去更加簡潔匠题，字族共六枚字體：極細(xì)體、纖細(xì)體但金、細(xì)體韭山、常規(guī)體、中黑體、中粗體钱磅。San Francisco：同樣是Mac OS X EL Capitan上最新發(fā)布的西文字體梦裂，感覺和
Helvetica看上去差別不大，目前已經(jīng)應(yīng)用在Mac OS 10.11+盖淡、iOS 9.0+年柠、watch OS等最新系統(tǒng)上。其他：Mac下默認(rèn)字體列表：蘋果官網(wǎng)褪迟、維基百科
結(jié)論：目前
蘋方和San Francisco為蘋果推出的最新字體冗恨，顯示效果也最為優(yōu)雅，但只有最新系統(tǒng)才能支持味赃，而黑體-簡和Helvetica可以獲得更多系統(tǒng)版本支持掀抹，顯示效果也相差無幾，可以接受心俗。
3傲武、Android系統(tǒng)：
Droid Sans、Droid Sans Fallback：
Droid Sans為安卓系統(tǒng)中默認(rèn)的西文字體城榛，是一款人文主義無襯線字體谱轨，而Droid Sans Fallback則是包含漢字、日文假名吠谢、韓文的文字?jǐn)U展支持土童。結(jié)論：
Droid Sans為默認(rèn)的字體，并結(jié)合了中英文工坊，無需單獨(dú)設(shè)置献汗。
4、iOS系統(tǒng)：
- iOS系統(tǒng)的字體和Mac OS系統(tǒng)的字體相同王污，保證了Mac上的字體效果罢吃，iOS設(shè)備就沒有太大問題。
5昭齐、Linux：
文泉驛點(diǎn)陣宋體：類似
宋體的襯線字體尿招，一般不推薦使用。文泉驛微米黑：幾乎是 Linux 社區(qū)現(xiàn)有的最佳簡體中文字體阱驾。
二就谜、選擇字體需要注意的問題
1、字體的中英文寫法：
我們在操作系統(tǒng)中常忱锔玻看到宋體丧荐、微軟雅黑這樣的字體名稱，但實(shí)際上這只是字體的顯示名稱喧枷，而不是字體文件的名稱虹统，一般字體文件都是用英文命名的弓坞，如SimSun、Microsoft Yahei车荔。在大多數(shù)情況下直接使用顯示名稱也能正確的顯示渡冻，但是有一些用戶的特殊設(shè)置會(huì)導(dǎo)致中文聲明無效。
因此忧便，保守的做法是使用字體的字體名稱（英文）或者兩者兼寫族吻。如下示例：
font-family: STXihei, "Microsoft YaHei";
font-family: STXihei, "華文細(xì)黑", "Microsoft YaHei", "微軟雅黑";
2、聲明英文字體：
絕大部分中文字體里都包含英文字母和數(shù)字茬腿，不進(jìn)行英文字體聲明是沒有問題的，但是大多數(shù)中文字體中的英文和數(shù)字的部分都不是特別漂亮宜雀，所以建議也對(duì)英文字體進(jìn)行聲明切平。
由于英文字體中大多不包含中文，我們可以先進(jìn)行英文字體的聲明辐董，這樣不會(huì)影響到中文字體的選擇悴品，因此優(yōu)先使用最優(yōu)秀的英文字體，中文字體聲明則緊隨其次简烘。如下示例：
font-family: Arial, "Microsoft YaHei";
3苔严、照顧不同的操作系統(tǒng)：
-
英文、數(shù)字部分：在默認(rèn)的操作系統(tǒng)中孤澎，Mac和Win都會(huì)帶有
Arial,Verdana,Tahoma等幾個(gè)預(yù)裝字體届氢，從顯示效果來看，Tahoma要比Arial更加清晰一些覆旭，因此字體設(shè)置Tahoma最好放到前面退子，當(dāng)找不到Tahoma時(shí)再使用Arial；而在Mac中型将，還擁有一款更加漂亮的Helvetica字體寂祥，所以為了照顧Mac用戶有更好的體驗(yàn)，應(yīng)該更優(yōu)先設(shè)置Helvetica字體七兜；Android系統(tǒng)下默認(rèn)的無襯線字體就可以接受丸凭，因此無需單獨(dú)設(shè)置。最后腕铸，英文惜犀、數(shù)字字體的最佳寫法如下：
font-family: Helvetica, Tahoma, Arial;
- 中文部分：在Win下，
微軟雅黑為大部分人最常使用的中文字體狠裹，由于很多人安裝Office的緣故向拆，Mac電腦中也會(huì)出現(xiàn)微軟雅黑字體，因此把顯示效果不錯(cuò)的微軟雅黑加入到字體列表是個(gè)不錯(cuò)的選擇酪耳；同樣浓恳，為了保證Mac中更為優(yōu)雅字體蘋方（PingFang SC）刹缝、黑體-簡（Heiti SC）、冬青黑體（ Hiragino Sans GB ）的優(yōu)先顯示颈将，需要把這些字體放到中文字體列表的最前面梢夯；同時(shí)為了照顧到Linux操作系統(tǒng)的體驗(yàn)，還需要添加文泉驛微米黑字體晴圾。最后颂砸，中文字體部分最佳寫法如下：
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、注意向下兼容
如果還需要考慮舊版本操作系統(tǒng)用戶的話死姚，不得不加上一些舊版操作系統(tǒng)存在的字體：Mac中的華文黑體人乓、冬青黑體，Win中的黑體等都毒。同樣按照顯示效果排列在列表后面色罚，寫法如下：
font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", STXihei, "Microsoft YaHei", SimHei, "WenQuanYi Micro Hei";
加入了 STXihei（華文細(xì)黑）和 SimHei（黑體）。
5账劲、補(bǔ)充字體族名稱
字體族大體上分為兩類：sans-serif（無襯線體）和serif（襯線體）戳护，當(dāng)所有的字體都找不到時(shí)，我們可以使用字體族名稱作為操作系統(tǒng)最后選擇字體的方向瀑焦。一般非襯線字體在顯示器中的顯示效果會(huì)比較好腌且，因此我們需要在最后添加 sans-serif，寫法如下：榛瓮。
font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "WenQuanYi Micro Hei", sans-serif;
三铺董、我們看一下大公司的常見寫法（2016.07查看）
1、小米
font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","HeitiSC","WenQuanYi Micro Hei",sans-serif;
小米公司優(yōu)先使用Helvetica Neue這款字體以保證最新版本Mac用戶的最佳體驗(yàn)禀晓，選擇了Arial作為Win下默認(rèn)英文字體及Mac的替代英文字體柄粹；中文字體方面首選了微軟雅黑，然后選擇了冬青黑體及黑體-簡作為Mac上的替代方案匆绣；最后使用文泉驛微米黑兼顧了Linux系統(tǒng)驻右。
2、淘寶
鑒于淘寶網(wǎng)改版頻率較頻繁崎淳，這里截圖保存了一下堪夭，點(diǎn)此查看。
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
其實(shí)從圖中明顯看出淘寶網(wǎng)的導(dǎo)航及內(nèi)容有著大量的襯線字體拣凹，鑒于淘寶網(wǎng)站大部分字號(hào)比較小逗概，顯示效果也還可以接受刹悴。代碼中可以看出淘寶使用了Tahoma奠骄、Arial作為首選英文字體辰狡，中文字體首選了冬青黑體，由于Win下沒有預(yù)裝該款字體菊匿，所以顯示出了后面的宋體（5b8b4f53為漢字宋體用 unicode 表示的寫法付呕，不用SimSun是因?yàn)?Firefox 的某些版本和 Opera 不支持
SimSun的寫法）
3计福、簡書
font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "MicrosoftYaHei", "WenQuanYi Micro Hei", sans-serif;
自認(rèn)為簡書的閱讀體驗(yàn)很棒，我們看看簡書所用的字體徽职，簡書優(yōu)先選擇了lucida家族的系列字體作為英文字體象颖，該系列字體在Mac和Win上都是預(yù)裝的，并且有著不俗的表現(xiàn)姆钉；中文字體方面將冬青黑體作為最優(yōu)先使用的字體说订，同樣考慮了Linux系統(tǒng)。
各大公司的字體設(shè)置大同小異潮瓶，這里不再一一舉例查看陶冷，有興趣的可以自己多多查看。
四毯辅、其他的一些注意點(diǎn)
1埂伦、字體何時(shí)需要添加引號(hào)
當(dāng)字體具體某個(gè)取值中若有一種樣式名稱包含空格，則需要用雙引號(hào)或單引號(hào)表示悉罕，如：
font-family: "Microsoft YaHei", "Arial Narrow", sans-serif;
如果書寫中文字體名稱為了保證兼容性也會(huì)添加引號(hào)赤屋，如：
font-family: "黑體-簡", "微軟雅黑", "文泉驛微米黑";
2立镶、引用外部字體
大多數(shù)的中文字體由于版權(quán)原因不能隨意使用壁袄，這里推薦一個(gè)免版權(quán)而且漂亮的中文字體思源黑體，該字體為Adobe與Google推出的一款開源字體媚媒， 有七種字體粗細(xì)（ExtraLight嗜逻、Light、Normal缭召、Regular栈顷、Medium、Bold 和 Heavy）嵌巷，完全支持日文萄凤、韓文、繁體中文和簡體中文搪哪，字形優(yōu)美靡努，依稀記得小米公司好像有使用過。
鑒于中文字體的體積比較大（一般字庫全一點(diǎn)的中文字體動(dòng)輒幾Mb）晓折，所以較少人會(huì)使用外部字體惑朦，如果真的需要引入，也可以考慮通過工具根據(jù)頁面文字的使用多少單獨(dú)生成中文字體漓概，以減小文件大小漾月。
五、最后胃珍，推薦寫法
由于每個(gè)人的審美不一樣梁肿，鐘愛的字體也會(huì)有所有不同蜓陌，這里給出我個(gè)人的常用寫法：
font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
另外推薦兩個(gè)github上的關(guān)于中文字體和排版的項(xiàng)目：
