WordPress網站如何選擇優雅的字體(font-family)

WordPress網站如何選擇優雅的網站字體系列(font-family)？大家都知道，在不同操作系統、不同遊覽器裏面默認顯示的字體是不一樣的，并且相同字體在不同操作系統裏面渲染的效果也不盡相同，那麽如何設置字體顯示效果會比較好呢？下面我們逐步的分析一下：

WordPress網站如何選擇優雅的字體(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：無襯線字體，優點在于它在小字上仍結構清晰端整、閱讀辨識容易。
• 其他：Windows 下默認字體列表：微軟官網、維基百科、Office字體
• 結論：微軟雅黑爲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等最新系統上。
• 其他：Mac下默認字體列表：蘋果官網、維基百科
• 結論：目前蘋方和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, "Microsoft YaHei", 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","WenQuanYi Micro 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", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

另外推薦兩個github上的關于中文字體和排版的項目：

• Fonts.css — 跨平台中文字體解決方案
• typo.css — 中文網頁重設與排版：一緻化浏覽器排版效果