前言
我周圍的碼農當中，有很多是技術大神，卻常常被字體這種簡單的東西所困擾。
這篇文章，我們來講一講關於字體的常識。這些常識所涉及到的問題，有很強的可操作性，都是在實際業務中真實遇到的，都是需要開發同學和產品經理、設計師不斷重複溝通的。
字體真的只是“系統默認，無從解釋”這麼簡單嗎？是產品被忽悠？還是開發在敷衍？二者之間的博弈究竟誰能勝出？學會本文，你就能勝出。
字體分類
常見的字體可以分為兩類：襯線體、無襯線體。
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[1]
多字體 fallback
多字體 fallback 機制，可以理解成是字體的一種兜底機制。它意思是：當指定的字體找不到時，就繼續往後找。比如：
.div {font-family: 'PingFang SC', 'Microsoft Yahei ', sans-serif;}
上面這行CSS代碼的意思是：讓文字在iOS & Mac 操作系統上使用蘋果的“蘋方”字體，在Windows 系統上用微軟雅黑字體，如果這兩個字體都沒有，就隨便找一個無襯線體進行顯示。
font-weight：字體的加粗屬性
font-weight 字體加粗屬性，是讓前端和產品同學最迷茫的屬性。當你把做好的頁面拿給產品經理體驗時，產品經理首先關注到的就是字體的加粗問題。
我們先來看看 font-weight 有哪些屬性值。
在設置字體是否加粗時，屬性值既可以直接填寫 100 至 900 這樣的數字，也可以填寫normal、bold這樣的單詞。 normal的值相當於 400，bold的值相當於 700。如下：
關鍵問題是，很多人會發現，在Android 平台的瀏覽器中， font-weight 無論是設置300、400，還是500，文字的粗細都沒有任何變化，只有到700的時候才會加粗一下，感覺瀏覽器好像不支持這些數值，那搞這麼多檔位有用嗎？
實際上，所有這些數值關鍵字瀏覽器都是支持的，之所以沒有看到任何粗細的變化，要看你所使用的字體是否支持。
就拿“微軟雅黑”這個字體來舉例，它只支持兩種粗細，所以當你在代碼裡寫成500的時候，也會被認為是400。但是 Mac 上的“蘋方”字體，就支持至少六種粗細。
各大平台的字體加粗效果
一張圖，勝過千言萬語。解釋了這麼多，我們來看看各大操作系統的默認字體，加粗效果是什麼樣的。
以下截圖，都是我親自測試的結果，如果你打算讓別人看字體加粗效果，直接把下面的圖丟給他即可。像我這樣貼心的前端，恐怕不多見了。
1、iOS 平台的默認字體加粗效果：（蘋方字體）
2、Android 平台（華為 P30 Pro）的默認字體加粗效果：（Droid Sans 字體）
3、Mac 平台的默認字體加粗效果：（蘋方字體）
4、Windows 平台的默認字體加粗效果：（微軟雅黑字體）
總結：（各大操作系統的默認字體加粗效果）
•Android 平台的 Droid Sans 字體，只有 >=700才會加粗；而且加粗效果相同。 •Mac & iOS 平台的“蘋方”字體：500 和600，加粗效果是不同的；>=600的加粗效果是相同的。 •Windows 平台的“微軟雅黑”字體：只有 >=600 才會加粗，而且加粗效果相同。
大部分字體不是免費的
你需要知道的是：你所了解的大部分字體，都不是免費的。換句話說，如果你想用第三方的付費字體從事商業活動，要先交錢獲得授權後，才可以正常使用。你在給公司做網頁時，就是一種商業行為。
免費字體是有的（比如思源黑體、阿里巴巴普惠體等），但是數量太少，而且不夠通用，我們做網頁時基本用不到。
所以，很多公司會專門購買一套商用字體庫、甚至是自己研發出一套字體，避免未來潛在的麻煩和糾紛。
給大家列舉一個常見的場景。很多時候，前端同學拿到的視覺稿是 psd 稿。在 PS 軟件裡，當我們用光標選中字體的時候，本來想看看它用的是什麼字體，結果出現了下面這一幕：
看到這個FZLTZCHK字體，別慌，馬上去網上查一下，發現它的中文名是< code >方正蘭亭字體系列。 基本可以肯定，這個字體也是要收費的。
此時，前端同學要馬上告訴產品或者設計師，這個字體不能免費使用，小心吃官司。
大多數情況下，網頁使用系統默認的字體就完全足夠。如果真的要使用特殊字體，要么就自主開發字體，要么就花錢夠買商業字體。比如我們 JD 公司就自主開發了一套商用字體JDZH，僅供 JD 公司使用。
最後一段
字體雖小，見微知著。
2005年6月，蘋果公司創始人喬布斯在斯坦福大學的畢業典禮上做過一次演講，他說了這樣一段話：
里德學院在那時提供了全美最好的美術字課程。在這個大學裡面的每個海報，每個抽屜的標籤上面全都是漂亮的美術字。輟學後，我決定去學學怎樣寫出漂亮的美術字。
當時的我從來沒有想過過我所學的這些設計知識，會有什麼實際的用處。但是十年之後，我把這些設計和創意融入到了 Mac 電腦之中，這也使這台 Mac 成為了第一台擁有漂亮字體的電腦。
而當 Windows 系統藉鑑了Mac之後，大家都覺得，所有的電腦都應該是這個樣子。
那時的我無法把這些內容連接起來，但是，十年後再來回顧的時候，一切都變得豁然開朗。
References
[1] serif，sans-serif，monospace，cursive和fantasy: http://www.ayqy.net/ blog/serif%EF%BC%8Csans-serif%EF%BC%8Cmonospace%EF%BC%8Ccursive%E5%92%8Cfantasy/
文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/After%20so%20much%20code%20do%20you%20really%20understand%20fonts.html
支付宝扫一扫 
评论列表（196条）
测试