網頁設計和開發中，關於字體的常識

時間 2019-11-05

標籤網頁設計開發關於字體常識简体版

原文原文鏈接

本文的最新內容將在GitHub上實時更新。歡迎在GitHub上關注我，一塊兒入門和進階前端。css

前言

我周圍的碼農當中，有不少是技術大神，卻經常被字體這種簡單的東西所困擾。前端

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

字體真的只是「系統默認，無從解釋」這麼簡單嗎？是產品被忽悠？仍是開發在敷衍？兩者之間的博弈究竟誰能勝出？學會本文，你就能勝出。github

字體分類

常見的字體能夠分爲兩類：襯線體、無襯線體。segmentfault

一、serif（襯線體）：在字的筆畫開始、結束的地方有額外的裝飾，並且筆畫的粗細會有所不一樣。瀏覽器

常見的襯線體有：字體

宋體、楷體url
Times New Romanspa

二、sans-serif（無襯線體）：筆劃粗細基本一致，只剩下主幹，造型簡明有力，起源也很晚。適用於標題、廣告等，識別性高。.net

常見的無襯線體有：

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

參考連接：如何優雅的選擇字體(font-family)

補充：

襯線體現在已經不多使用了，你所熟悉的「宋體」，也基本只能在紙質出版物中見到。而非襯線體更符合現代審美。

因此，在這裏舒適提示各位：作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之間的各類粗細。

再好比，前段時間，阿里巴巴開源的普惠字體，也是支持多種粗細的：

各大平臺的默認字體加粗效果

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

如下截圖，都是我親測的結果，若是你打算讓別人看效果，直接把下面的圖丟給他便可。像我這樣貼心的前端，很少見了。

一、Mac 平臺的默認字體加粗效果：（蘋方字體）

二、Windows 平臺的默認字體加粗效果：（微軟雅黑字體）

三、iOS 平臺的默認字體加粗效果：（蘋方字體）

四、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以後，彷佛全部的電腦都應該是這個樣子。

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