本文的最新內容將在 "GitHub" 上實時更新。歡迎在GitHub上關註我，一起入門和進階前端。 前言 我周圍的碼農當中，有很多是技術大神，卻常常被字體這種簡單的東西所困擾。 這篇文章，我們來講一講關於字體的常識。這些常識所涉及到的問題，有很強的可操作性，都是在實際業務中真實遇到的，都是需要開發同 ...
本文的最新內容將在GitHub上實時更新。歡迎在GitHub上關註我，一起入門和進階前端。
前言
我周圍的碼農當中，有很多是技術大神，卻常常被字體這種簡單的東西所困擾。
這篇文章，我們來講一講關於字體的常識。這些常識所涉及到的問題，有很強的可操作性，都是在實際業務中真實遇到的，都是需要開發同學和產品經理、設計師不斷重覆溝通的。
字體真的只是“系統預設，無從解釋”這麼簡單嗎？是產品被忽悠？還是開發在敷衍？二者之間的博弈究竟誰能勝出？學會本文，你就能勝出。
字體分類
常見的字體可以分為兩類：襯線體、無襯線體。
1、serif（襯線體）：在字的筆畫開始、結束的地方有額外的裝飾，而且筆畫的粗細會有所不同。
常見的襯線體有：
宋體、楷體
Times New Roman
2、sans-serif（無襯線體）：筆劃粗細基本一致，只剩下主幹，造型簡明有力，起源也很晚。適用於標題、廣告等，識別性高。
常見的無襯線體有：
- 黑體
- Windows 平臺預設的中文字體：微軟雅黑（Microsoft Yahei）
- Windows 平臺預設的英文字體：Arial
- Mac & iOS 平臺預設的中文字體：蘋方（PingFang SC）
- Mac & iOS 平臺預設的英文字體：San Francisco
- Android 平臺預設字體：Droid Sans
補充：
襯線體如今已經很少使用了，你所熟悉的“宋體”，也基本只能在紙質出版物中見到。而非襯線體更符合現代審美。
所以，在這裡溫馨提示各位：做PPT不要用宋體。如果你不知道用什麼字體，那就用系統的預設字體就好：Win 平臺用微軟雅黑、Mac 平臺用蘋方字體。
如果你發現一名設計師，在做海報設計、或者製圖的時候，使用了宋體，說明她一定是個外行。
字體族
CSS 中的字體族可以理解成是某一類字體。常見的字體族可以分為五類：
- serif：襯線體。
- sans-serif：無襯線體。
- monospace：等寬字體。每一個字母所占的寬度是相同的。寫代碼的字體儘量用等寬字體。
- cursive：手寫字體。比如徐靜蕾手寫體。
- fantasy：夢幻字體。比如一些藝術字。
這五類字體族不代表某一個具體的字體，而是當你在 css 中指定字體族的時候，系統就有可能在字體族中找出一種字體來顯示。
參考鏈接：serif，sans-serif，monospace，cursive和fantasy
多字體 fallback 機制
多字體 fallback 機制：當指定的字體找不到（或者某些文字不支持這個字體）時，那就接著往後找。比如：
.div1{
font-family: "PingFang SC", "Microsoft Yahei", monospace;
}
上方 CSS 代碼的意思是：讓指定標簽元素中的文字，在 Mac & iOS 平臺用蘋方字體，在 Win 平臺用微軟雅黑字體，如果這兩個字體都沒有，就隨便找一個等寬的字體進行渲染。
註意：
（1）寫 CSS 代碼時，字體族不需要帶引號。
（2）有些 Mac 用戶會安裝 Office 等軟體，安裝這些軟體後，系統會順帶安裝微軟雅黑字體。此時，寫 css 代碼時，如果寫成 "Microsoft Yahei", "PingFang SC"這種順序，可能導致有些 Mac 用戶用微軟雅黑來顯示字體。這麼好看的蘋方字體，你忍心割捨嗎？
font-weight：字體的加粗屬性
font-weight 字體加粗屬性，是讓前端同學最迷茫的屬性。當你把做好的網頁拿給產品經理驗收時，網頁一打開，產品經理首先關註到的就是字體的加粗問題，你信不信？下麵這些話都是產品經理的口頭禪，想必早已讓你產生了幻聽：
“這個字體怎麼沒有加粗？”
“這個字體是不是太粗了點？”
“為什麼 iPhone 和 Android 手機上的文字粗細不一致？”
想要明白這些疑惑，我們先來看看 font-weight 有哪些屬性值。
font-weight 屬性：在設置字體是否加粗時，屬性值既可以直接填寫 100 至 900 這樣的數字，也可以填寫normal、bold這樣的單詞。normal的值相當於 400，bold的值相當於 700。如下：
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-weight: normal; // 相當於 400
font-weight: bold; // 相當於 700關鍵問題來了。很多人會發現，在 Windows 平臺的瀏覽器中， font-weight 無論是設置300、400，還是500，文字的粗細都沒有任何變化，只有到600的時候才會加粗一下，感覺瀏覽器好像不支持這些數值，那搞這麼多檔位不就是多餘的嗎？
這個時候，大家就開始吐槽 Windows 電腦太挫、Windows 瀏覽器太挫；同時還會感嘆 Mac 真香，支持字體的各種粗細。
實際上，所有這些數值關鍵字瀏覽器都是支持的，之所以沒有看到任何粗細的變化，是因為你所使用的字體不支持。
就拿“微軟雅黑”來舉例，它只支持 400 和 700 這兩種粗細，所以當你在代碼里寫成500的時候，也會被認為是400。但是 Mac 上的“蘋方”字體，就支持從100到900之間的各種粗細。
再比如，前段時間，阿裡巴巴開源的普惠字體，也是支持多種粗細的：
各大平臺的預設字體加粗效果
一張圖，勝過千言萬語。解釋了這麼多，我們來看看各大平臺的字體加粗效果是什麼樣的。
以下截圖，都是我親測的結果，如果你打算讓別人看效果，直接把下麵的圖丟給他即可。像我這樣貼心的前端，不多見了。
1、Mac 平臺的預設字體加粗效果：（蘋方字體）
2、Windows 平臺的預設字體加粗效果：（微軟雅黑字體）
3、iOS 平臺的預設字體加粗效果：（蘋方字體）
4、Android 平臺（華為 P30 Pro）的預設字體加粗效果：（Droid Sans 字體）
總結：（各大平臺的預設字體加粗效果）
Mac & iOS 平臺的“蘋方”字體：500 和600，加粗效果是不同的；
>=600的加粗效果是相同的。Windows 平臺的“微軟雅黑”字體：只有
>=600才會加粗，而且加粗效果相同。Android 平臺的 Droid Sans 字體，只有
>=700才會加粗；而且加粗效果相同。
大部分字體不是免費的
有一點你需要知道：你所見到的大部分字體，都不是免費的。換句話說，如果你想用第三方字體從事商業活動，要先交錢，獲得授權後才可以使用。你在給公司做網頁的時候，就是一種商業行為。
免費字體當然有，比如思源黑體（Adobe 和 Google 在2014年7月聯合推出的一款開源字體）、阿裡巴巴普惠體等。但這些免費字體，我們平時基本用不到。
這也就是為什麼，很多公司會專門購買一套商用字體庫、甚至是自己開發一套字體出來，避免未來潛在的糾紛和麻煩。
給大家列舉一個常見的場景。很多時候，前端同學拿到的視覺稿是 psd 稿，需要用 PS 軟體打開源文件，才能看到裡面的文字是什麼字體。在 PS 軟體里，當我們用游標選中字體的時候，出現了下麵這種場景：
看到上面的FZLTZCHK，不要慌，馬上去 Google 查一下，發現這個字體的全稱是方正蘭亭字體系列。恩，基本可以肯定， 這個字體也是要收費的。
這個時候，前端同學要馬上告訴產品或者設計師，不要用這個字體，因為它是商用字體，是要收費的，小心吃官司。那我們該用什麼字體呢？接著往下看。
網頁一般用什麼字體
大多數情況下，網頁使用系統預設的字體就足夠了。如果要使用特殊字體，頂多只是讓阿拉伯數字使用特殊字體。中文和英文，使用預設字體，完全足夠。
如果確實要使用特殊字體，只有這幾種辦法：
使用開源的免費字體（比如思源黑體、阿裡巴巴普惠體等）。但這類字體，種類很少，而且不是很好看。網頁開發中，基本沒人用。
單獨購買商用字體，獲得授權。
自己公司開發一套字體，給自己人用。
比如我所在的 JD 公司就自主開發了一套商用字體JDZH（只允許 JD 公司自己用，別家公司不允許用），支持三種粗細。如下：
/**
* JD正黑體，提供三種字重，請嚴格按設計稿選擇字體
*/
@font-face {
font-family: 'JDZH-Light';
src: url('xxx.com/data/ppms/others/JDZH_Light.ttf') format('truetype');
}
@font-face {
font-family: 'JDZH-Regular';
src: url('xxx.com/data/ppms/others/JDZH_Regular.ttf') format('truetype');
}
@font-face {
font-family: 'JDZH-Bold';
src: url('xxx.com/data/ppms/others/JDZH_Bold.ttf') format('truetype');
}
@font-face {
font-family: 'JDZhengHT-EN-Bold';
src: url('xxx.com/data/ppms/others/JDZhengHei_01_Bold.ttf') format('truetype');
}
為了使用這個JDZH字體， JD公司在實際開髮網頁時，是這樣做的：
步驟1：在公共的 CSS 文件中引入上方的字體庫代碼。這樣的話，當頁面載入時，用戶的終端就會去下載這個字體庫。
步驟2：在業務代碼中，針對目標樣式，直接使用
font-family: 'JDZH-Regular';這樣的代碼，即可生效。
這個JDZH，我們一般也只使用在阿拉伯數字中；中文和英文，建議使用系統預設字體就行。
最後一段
所謂「見微知著」，一個再不起眼的知識點，也是有很多學問的。光是“字體”這一點，就足夠成為一門學科。
2005年，蘋果公司創始人喬布斯（Steve Jobs）在斯坦福大學的畢業典禮演講上，有過這樣一段話：
當時的我從來沒有期盼過我所學的這些東西，能夠在我的生活中有什麼實際的用處。
但是到了十年之後，當我們在設計第一臺 Macintosh 電腦時，這些所學都涌進了我的頭腦。於是，我把這些設計融入到了 Mac 電腦之中，這也使這台 Mac 成為了第一臺擁有漂亮字體的電腦。
可以說，如果我當時沒有退學，就不會有機會去參加我感興趣的美術字課程，Mac 也就不會擁有那些美妙的排版和字體。而當 Windows 系統借鑒了Mac之後，似乎所有的電腦都應該是這個樣子。
當時的我沒有辦法把這些點點滴滴連接起來，但是，當我十年後回顧的時候，一切都變得豁然開朗。
