擼了那麼多程式碼，你真的瞭解字型？

本文作者@千古壹號。

前言

我周圍的碼農當中，有很多是技術大神，卻常常被字型這種簡單的東西所困擾。

這篇文章，我們來講一講關於字型的常識。這些常識所涉及到的問題，有很強的可操作性，都是在實際業務中真實遇到的，都是需要開發同學和產品經理、設計師不斷重複溝通的。

字型真的只是“系統預設，無從解釋”這麼簡單嗎？是產品被忽悠？還是開發在敷衍？二者之間的博弈究竟誰能勝出？學會本文，你就能勝出。

字型分類

常見的字型可以分為兩類：襯線體、無襯線體。

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之後，似乎所有的電腦都應該是這個樣子。

當時的我沒有辦法把這些點點滴滴連線起來，但是，當我十年後回顧的時候，一切都變得豁然開朗。