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

基礎知識

serif和sans-serif字體之間的區別

西文字體分爲兩大族：襯線體（serif）和無襯線體（sans-serif）。像Times、Times New Roman等都是屬於襯線體，而Arial、helvetica則是屬於無襯線體。

襯線字體，意思是在字的筆畫開始、結束的地方有額外的裝飾，並且筆畫的粗細會有所不一樣。
無襯線體是無襯線字體，沒有這些額外的裝飾，並且筆畫的粗細差很少。

在計算機屏幕上，sans-serif字體被認爲是比serif字體容易閱讀。

字體系列

ont-family 屬性設置文本的字體系列。

font-family 屬性應該設置幾個字體名稱做爲一種"後備"機制，若是瀏覽器不支持第一種字體，他將嘗試下一種字體。

注意:

名稱包含空格，則須要用雙引號或單引號表示，如：

font-family: "Microsoft YaHei", "Arial Narrow", sans-serif;

中文字體名稱爲了保證兼容性也會添加引號，如：

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等無襯線字體爲主。

二、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能夠得到更多系統版本支持，顯示效果也相差無幾，能夠接受。

三、Android系統：

• Droid Sans、Droid Sans Fallback：Droid Sans爲安卓系統中默認的西文字體，是一款人文主義無襯線字體，而Droid Sans Fallback則是包含漢字、日文假名、韓文的文字擴展支持。

• 結論：Droid Sans爲默認的字體，並結合了中英文，無需單獨設置。

四、iOS系統：

• iOS系統的字體和Mac OS系統的字體相同，保證了Mac上的字體效果，iOS設備就沒有太大問題。

五、Linux：

• 文泉驛點陣宋體：相似宋體的襯線字體，通常不推薦使用。

• 文泉驛微米黑：幾乎是 Linux 社區現有的最佳簡體中文字體。

2、選擇字體須要注意的問題

一、使用英文名

常看到宋體、微軟雅黑這樣的字體名稱，但這並非字體文件的名稱，通常字體文件都是用英文命名的，如SimSun、Microsoft Yahei。

在大多數狀況下直接使用名稱也能正確顯示，可是有一些用戶的特殊設置會致使中文聲明無效。

所以，保守的作法是使用英文名稱或者二者兼寫。以下示例：

font-family: STXihei, "Microsoft YaHei";
font-family: STXihei, "華文細黑", "Microsoft YaHei", "微軟雅黑";

二、聲明英文字體

絕大部分中文字體裏都包含英文字母和數字，可是都不是特別漂亮，因此建議也對英文字體進行聲明。

因爲英文字體中大多不包含中文，咱們能夠先進行英文字體的聲明，這樣不會影響到中文字體的選擇。

所以優先使用最優秀的英文字體，中文字體聲明則緊隨其次。以下示例：

font-family: Arial, "Microsoft YaHei";

三、照顧不一樣的操做系統

• 英文、數字部分：在默認的操做系統中，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, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";

四、注意向下兼容性

若是還須要考慮舊版本操做系統用戶的話，不得不加上一些舊版操做系統存在的字體：Mac中的華文黑體、冬青黑體，Win中的黑體等。一樣按照顯示效果排列在列表後面，寫法以下：

font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", STXihei, "Microsoft YaHei", SimHei, "WenQuanYi Micro Hei";

加入了 STXihei（華文細黑）和 SimHei（黑體）。

五、補充字體族名稱

字體族大致上分爲兩類：sans-serif（無襯線體）和serif（襯線體），當全部的字體都找不到時，咱們可使用字體族名稱做爲操做系統最後選擇字體的方向。通常非襯線字體在顯示器中的顯示效果會比較好，所以咱們須要在最後添加 sans-serif ，寫法以下：

font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

3、最後

推薦，我的的經常使用寫法：

font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

 

 

參考連接：

1. http://www.javashuo.com/article/p-dvgnwhjv-y.html

2. https://www.runoob.com/css/css-font.html