網(wǎng)頁設(shè)計(jì)和開發(fā)中，關(guān)于字體的常識

時(shí)間：2023-09-30 09:48:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-30 09:48:01 來源：網(wǎng)站運(yùn)營

網(wǎng)頁設(shè)計(jì)和開發(fā)中，關(guān)于字體的常識：

前言

本文作者@千古壹號。

我周圍的碼農(nóng)當(dāng)中，有很多是技術(shù)大神，卻常常被字體這種簡單的東西所困擾。

這篇文章，我們來講一講關(guān)于字體的常識。這些常識所涉及到的問題，有很強(qiáng)的可操作性，都是在實(shí)際業(yè)務(wù)中真實(shí)遇到的，都是需要開發(fā)同學(xué)和產(chǎn)品經(jīng)理、設(shè)計(jì)師不斷重復(fù)溝通的。

字體真的只是“系統(tǒng)默認(rèn)，無從解釋”這么簡單嗎？是產(chǎn)品被忽悠？還是開發(fā)在敷衍？二者之間的博弈究竟誰能勝出？學(xué)會本文，你就能勝出。

字體分類

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

1、serif（襯線體）：在字的筆畫開始、結(jié)束的地方有額外的裝飾，而且筆畫的粗細(xì)會有所不同。

常見的襯線體有：

• 宋體、楷體
  
• Times New Roman
  

2、sans-serif（無襯線體）：筆劃粗細(xì)基本一致，只剩下主干，造型簡明有力，起源也很晚。適用于標(biāo)題、廣告等，識別性高。

常見的無襯線體有：

• 黑體
• Windows 平臺默認(rèn)的中文字體：微軟雅黑（Microsoft Yahei）
• Windows 平臺默認(rèn)的英文字體：Arial
• Mac & iOS 平臺默認(rèn)的中文字體：蘋方（PingFang SC）
• Mac & iOS 平臺默認(rèn)的英文字體：San Francisco
• Android 平臺默認(rèn)字體：Droid Sans

補(bǔ)充：

襯線體如今已經(jīng)很少使用了，你所熟悉的“宋體”，也基本只能在紙質(zhì)出版物中見到。而非襯線體更符合現(xiàn)代審美。

所以，在這里溫馨提示各位：做PPT不要用宋體。如果你不知道用什么字體，那就用系統(tǒng)的默認(rèn)字體就好：Win 平臺用微軟雅黑、Mac 平臺用蘋方字體。

如果你發(fā)現(xiàn)一名設(shè)計(jì)師，在做海報(bào)設(shè)計(jì)、或者制圖的時(shí)候，使用了宋體，說明她一定是個外行。

字體族

CSS 中的字體族可以理解成是某一類字體。常見的字體族可以分為五類：

• serif：襯線體。
• sans-serif：無襯線體。
• monospace：等寬字體。每一個字母所占的寬度是相同的。寫代碼的字體盡量用等寬字體。
• cursive：手寫字體。比如徐靜蕾手寫體。
• fantasy：夢幻字體。比如一些藝術(shù)字。

這五類字體族不代表某一個具體的字體，而是當(dāng)你在 CSS 中指定字體族的時(shí)候，系統(tǒng)就有可能在字體族中找出一種字體來顯示。

參考鏈接：serif，sans-serif，monospace，cursive和fantasy

多字體 fallback 機(jī)制

多字體 fallback 機(jī)制：當(dāng)指定的字體找不到（或者某些文字不支持這個字體）時(shí)，那就接著往后找。比如：

.div1{ font-family: "PingFang SC", "Microsoft Yahei", monospace;}上方 CSS 代碼的意思是：讓指定標(biāo)簽元素中的文字，在 Mac & iOS 平臺用蘋方字體，在 Win 平臺用微軟雅黑字體，如果這兩個字體都沒有，就隨便找一個等寬的字體進(jìn)行渲染。

注意：

（1）寫 CSS 代碼時(shí)，字體族不需要帶引號。

（2）有些 Mac 用戶會安裝 Office 等軟件，安裝這些軟件后，系統(tǒng)會順帶安裝微軟雅黑字體。此時(shí)，寫 CSS 代碼時(shí)，如果寫成 "Microsoft Yahei", "PingFang SC"這種順序，可能導(dǎo)致有些 Mac 用戶用微軟雅黑來顯示字體。這么好看的蘋方字體，你忍心割舍嗎？

font-weight：字體的加粗屬性

font-weight 字體加粗屬性，是讓前端同學(xué)最迷茫的屬性。當(dāng)你把做好的網(wǎng)頁拿給產(chǎn)品經(jīng)理驗(yàn)收時(shí)，網(wǎng)頁一打開，產(chǎn)品經(jīng)理首先關(guān)注到的就是字體的加粗問題，你信不信？下面這些話都是產(chǎn)品經(jīng)理的口頭禪，想必早已讓你產(chǎn)生了幻聽：

• “這個字體怎么沒有加粗？”
  
• “這個字體是不是太粗了點(diǎn)？”
  
• “為什么 iPhone 和 Android 手機(jī)上的文字粗細(xì)不一致？”
  

想要明白這些疑惑，我們先來看看 font-weight 有哪些屬性值。

font-weight 屬性：在設(shè)置字體是否加粗時(shí)，屬性值既可以直接填寫 100 至 900 這樣的數(shù)字，也可以填寫normal、bold這樣的單詞。normal的值相當(dāng)于 400，bold的值相當(dāng)于 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; // 相當(dāng)于 400font-weight: bold; // 相當(dāng)于 700關(guān)鍵問題來了。很多人會發(fā)現(xiàn)，在 Windows 平臺的瀏覽器中， font-weight 無論是設(shè)置300、400，還是500，文字的粗細(xì)都沒有任何變化，只有到600的時(shí)候才會加粗一下，感覺瀏覽器好像不支持這些數(shù)值，那搞這么多檔位不就是多余的嗎？

這個時(shí)候，大家就開始吐槽 Windows 電腦太挫、Windows 瀏覽器太挫；同時(shí)還會感嘆 Mac 真香，支持字體的各種粗細(xì)。

實(shí)際上，所有這些數(shù)值關(guān)鍵字瀏覽器都是支持的，之所以沒有看到任何粗細(xì)的變化，是因?yàn)槟闼褂玫淖煮w不支持。

就拿“微軟雅黑”來舉例，它只支持 400 和 700 這兩種粗細(xì)，所以當(dāng)你在代碼里寫成500的時(shí)候，也會被認(rèn)為是400。但是 Mac 上的“蘋方”字體，就支持從100到900之間的各種粗細(xì)。

再比如，前段時(shí)間，阿里巴巴開源的普惠字體，也是支持多種粗細(xì)的：

各大平臺的默認(rèn)字體加粗效果

一張圖，勝過千言萬語。解釋了這么多，我們來看看各大平臺的字體加粗效果是什么樣的。

以下截圖，都是我親測的結(jié)果，如果你打算讓別人看效果，直接把下面的圖丟給他即可。像我這樣貼心的前端，不多見了。

1、Mac 平臺的默認(rèn)字體加粗效果：（蘋方字體）

2、Windows 平臺的默認(rèn)字體加粗效果：（微軟雅黑字體）

3、iOS 平臺的默認(rèn)字體加粗效果：（蘋方字體）

4、Android 平臺（華為 P30 Pro）的默認(rèn)字體加粗效果：（Droid Sans 字體）

總結(jié)：（各大平臺的默認(rèn)字體加粗效果）

• Mac & iOS 平臺的“蘋方”字體：500 和600，加粗效果是不同的；>=600的加粗效果是相同的。
  
• Windows 平臺的“微軟雅黑”字體：只有 >=600 才會加粗，而且加粗效果相同。
  
• Android 平臺的 Droid Sans 字體，只有 >=700才會加粗；而且加粗效果相同。
  

大部分字體不是免費(fèi)的

有一點(diǎn)你需要知道：你所見到的大部分字體，都不是免費(fèi)的。換句話說，如果你想用第三方字體從事商業(yè)活動，要先交錢，獲得授權(quán)后才可以使用。你在給公司做網(wǎng)頁的時(shí)候，就是一種商業(yè)行為。

免費(fèi)字體當(dāng)然有，比如思源黑體（Adobe 和 Google 在2014年7月聯(lián)合推出的一款開源字體）、阿里巴巴普惠體等。但這些免費(fèi)字體，我們平時(shí)基本用不到。

這也就是為什么，很多公司會專門購買一套商用字體庫、甚至是自己開發(fā)一套字體出來，避免未來潛在的糾紛和麻煩。

給大家列舉一個常見的場景。很多時(shí)候，前端同學(xué)拿到的視覺稿是 psd 稿，需要用 PS 軟件打開源文件，才能看到里面的文字是什么字體。在 PS 軟件里，當(dāng)我們用光標(biāo)選中字體的時(shí)候，出現(xiàn)了下面這種場景：

看到上面的FZLTZCHK，不要慌，馬上去 Google 查一下，發(fā)現(xiàn)這個字體的全稱是方正蘭亭字體系列。恩，基本可以肯定， 這個字體也是要收費(fèi)的。

這個時(shí)候，前端同學(xué)要馬上告訴產(chǎn)品或者設(shè)計(jì)師，不要用這個字體，因?yàn)樗巧逃米煮w，是要收費(fèi)的，小心吃官司。那我們該用什么字體呢？接著往下看。

網(wǎng)頁一般用什么字體

大多數(shù)情況下，網(wǎng)頁使用系統(tǒng)默認(rèn)的字體就足夠了。如果要使用特殊字體，頂多只是讓阿拉伯?dāng)?shù)字使用特殊字體。中文和英文，使用默認(rèn)字體，完全足夠。

如果確實(shí)要使用特殊字體，只有這幾種辦法：

• 使用開源的免費(fèi)字體（比如思源黑體、阿里巴巴普惠體等）。但這類字體，種類很少，而且不是很好看。網(wǎng)頁開發(fā)中，基本沒人用。
  
• 單獨(dú)購買商用字體，獲得授權(quán)。
  
• 自己公司開發(fā)一套字體，給自己人用。
  

比如我所在的 JD 公司就自主開發(fā)了一套商用字體JDZH（只允許 JD 公司自己用，別家公司不允許用），支持三種粗細(xì)。如下：

/** * JD正黑體，提供三種字重，請嚴(yán)格按設(shè)計(jì)稿選擇字體 */ @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公司在實(shí)際開發(fā)網(wǎng)頁時(shí)，是這樣做的：

• 步驟1：在公共的 CSS 文件中引入上方的字體庫代碼。這樣的話，當(dāng)頁面加載時(shí)，用戶的終端就會去下載這個字體庫。
  
• 步驟2：在業(yè)務(wù)代碼中，針對目標(biāo)樣式，直接使用 font-family: 'JDZH-Regular';這樣的代碼，即可生效。

這個JDZH，我們一般也只使用在阿拉伯?dāng)?shù)字中；中文和英文，建議使用系統(tǒng)默認(rèn)字體就行。

最后一段

所謂「見微知著」，一個再不起眼的知識點(diǎn)，也是有很多學(xué)問的。光是“字體”這一點(diǎn)，就足夠成為一門學(xué)科。

2005年，蘋果公司創(chuàng)始人喬布斯（Steve Jobs）在斯坦福大學(xué)的畢業(yè)典禮演講上，有過這樣一段話：

當(dāng)時(shí)的我從來沒有期盼過我所學(xué)的這些東西，能夠在我的生活中有什么實(shí)際的用處。

但是到了十年之后，當(dāng)我們在設(shè)計(jì)第一臺 Macintosh 電腦時(shí)，這些所學(xué)都涌進(jìn)了我的頭腦。于是，我把這些設(shè)計(jì)融入到了 Mac 電腦之中，這也使這臺 Mac 成為了第一臺擁有漂亮字體的電腦。

可以說，如果我當(dāng)時(shí)沒有退學(xué)，就不會有機(jī)會去參加我感興趣的美術(shù)字課程，Mac 也就不會擁有那些美妙的排版和字體。而當(dāng) Windows 系統(tǒng)借鑒了Mac之后，似乎所有的電腦都應(yīng)該是這個樣子。

當(dāng)時(shí)的我沒有辦法把這些點(diǎn)點(diǎn)滴滴連接起來，但是，當(dāng)我十年后回顧的時(shí)候，一切都變得豁然開朗。

推薦閱讀

• 常見的免費(fèi)字體：http://zenozeng.github.io/Free-Chinese-Fonts/
  
• 如何優(yōu)雅的選擇字體(font-family)：https://segmentfault.com/a/1190000006110417
  
• iconfont：https://www.iconfont.cn/
  
• 阿里巴巴官方發(fā)布免費(fèi)商用字體：阿里巴巴普惠體：https://mp.weixin.qq.com/s/daKUNnF_Ste-O1l0sR89sQ
  
• 得到 | 從甲骨文至得到今楷，造字的人都是神：https://mp.weixin.qq.com/s/ZnMxrhoH9piLf9EaSIwiGA
  

本文于2019-10-16原創(chuàng)首發(fā)于「千古壹號」。歡迎有心人關(guān)注，學(xué)習(xí)更多知識和技能。