1. 程式人生 > >前端開發你該知道的字型

前端開發你該知道的字型

字型的分類

就 Web 常用的一些字型而言,經常聽說的字型型別,大致可以分為這幾種:

serif(襯線)
sans-serif(無襯線)
monospace(等寬)
fantasy(夢幻)
cuisive(草體)

其實大體上分為襯線字型和無襯線字型,等寬字型中也有襯線等寬和無襯線等寬字型,這 5 個分類是 font-family 的 5 個可用字體系列取值。

也就是說,上述 5 個名字,代表的並非某個特定字型,而是一系列字型,這些通用的名稱允許使用者代理(通常就是瀏覽器)從相應集合中選擇一款字型。

這也很好解釋了,font-family 中的 family ,家庭的意思,也就是不單單指一個,而是可以指定多個,上述 5 個英文單詞都是 font-family 的可用取值,下文還會詳細講到。

下面詳細瞭解一下每類字型。

serif – 襯線字型

serif,意為有襯線的字型,襯線的意思是在字元筆畫末端有叫做襯線的小細節的額外裝飾,而且筆畫的粗細會有所不同,這些細節在大寫字母中特別明顯。

OK,那麼有哪些常用字型屬於襯線字型呢?

宋體(SimSun)

Windows 下大部分瀏覽器的預設中文字型,是為適應印刷術而出現的一種漢字字型。筆畫有粗細變化,是一種襯線字型,宋體在小字號下的顯示效果還可以接受,但是字號一大體驗就很差了,所以使用的時候要注意,不建議做標題字型使用。

Times New Roman
Mac 平臺 Safari 下預設的英文字型,是最常見且廣為人知的西文襯線字型之一,眾多網頁瀏覽器和文書處理軟體都是用它作為預設字型。

sans-serif – 無襯線字型

sans 的意思是無,sans-serif 也就是無襯線的意思。專指西文中沒有襯線的字型,與漢字字型中的黑體相對應。與襯線字型相反,該類字型通常是機械的和統一線條的,它們往往擁有相同的曲率,筆直的線條,銳利的轉角。

中文下,無襯線字型就是黑體,黑體字也就是又稱方體或等線體,沒有襯線裝飾,字形端莊,筆畫橫平豎直,筆跡全部一樣粗細。

看看又有哪些常見的無襯線字型。

微軟雅黑(Microsoft Yahei)

大名鼎鼎的微軟雅黑相信都不陌生,從 windows Vista 開始,微軟提供了這款新的字型,一款無襯線的黑體類字型,顯著提高了字型的顯示效果。現在這款字型已經成為 windows 瀏覽器最值得使用的中文字型。

華文黑體(STHeiti)、華文細黑(STXihei)

屬於同一字型家族系列,MAC OS X 10.6 之前的簡體中文系統介面的預設中文字型,正常粗細就是華文細黑,粗體下則是華文黑體。

黑體-簡(Heiti SC)

從 MAC OS X 10.6 開始,黑體-簡代替華文黑體用作簡體中文系統介面預設字型,蘋果生態最常用的字型之一,包括 iPhone、iPad 等裝置用的也是這款字型。

冬青黑體(Hiragino Sans GB)

又叫蘋果麗黑,Hiragino 是字遊工房設計的系列字型名稱。是一款清新的專業印刷字型,小字號時足夠清晰,Mac OS X 10.6 開始自帶有 W3 和 W6 。

Helvetica、Helvetica Neue

被廣泛用於全世界使用拉丁字母和西裡爾字母的國家。Helvetica 是蘋果電腦的預設字型,微軟常用的Arial 字型也來自於它。

Arial

Windows 平臺上預設的無襯線西文字型,有多種變體,比例及字重(weight)和 Helvetica 極為相近。

Verdana

無襯線字型,優點在於它在小字上仍結構清晰端整、閱讀辨識容易。

Tahoma

十分常見的無襯線字型,字型結構和 Verdana 很相似,其字元間距較小,而且對 Unicode 字集的支援範圍較大。許多不喜歡 Arial 字型的人常常會改用 Tahoma 來代替,除了是因為 Tahoma 很容易取得之外,也是因為 Tahoma 沒有一些 Arial 為人詬病的缺點,例如大寫“i”與小寫“L”難以分辨等。(這裡故意反過來寫)。

monospace – 等寬字型

這系列字型程式設計師們其實都不陌生。我們用來敲程式碼的編輯器,字型的選擇經常就是一類等寬字型。

等寬字型是指字元寬度相同的電腦字型,常見於 IDE 或者編輯器中,每個字母的寬度相等,通常用於計算機相關書籍中排版程式碼塊。

除了 IDE ,我們看到的技術文章中的程式碼塊中,經常也是使用等寬字型進行排版。

Consolas

這是一套等寬的字型,屬無襯線字型。這個字型使用了微軟的 ClearType 字型平滑技術,主要是設計做為程式碼的顯示字型之用,特別之處是它的“0”字加入了一斜撇,以方便與字母“O”分辨。

ClearType:由微軟在其作業系統中提供的螢幕亞畫素微調字型平滑工具,讓 Windows 字型更加漂亮。在 Windows XP 平臺上,這項技術預設是關閉,到了Windows Vista 才預設為開啟。

上圖是 Github 程式碼區塊的字型設定,可以看到,預設字型就是 Consolas ,緊接著的幾個都是其它等寬字型,如果使用者的系統中都沒有預裝這些字型,則會匹配最後一個 monospace ,它表示等寬字體系列,會從使用者系統中的等寬字型中選取一個展示。

fantasy 、cuisive

fantasy和 cuisive 字型在瀏覽器中不常用,在各個瀏覽器中有明顯的差異。

中文字型的相容寫法

一些中文字型,例如font-family: ‘宋體’,由於字元編碼的問題,少部分瀏覽器解釋這個程式碼的時候,中文出現亂碼,這個時候設定的字型無法正常顯示。

所以通常會轉化成對應的英文寫法或者是對應的 unicode 編碼,font-family:‘宋體’ -> font-family: ‘\5b8b\4f53’。

\5b8b\4f53 是宋體兩個中文字的 unicode 編碼表示。類似的寫法還有:

黑體:\9ED1\4F53
微軟雅黑:\5FAE\8F6F\96C5\9ED1
華文細黑:\534E\6587\7EC6\9ED1
華文黑體:\534E\6587\9ED1\4F53

Unicode編碼: 人們希望在一套系統裡面能夠容納所有字元,Unicode 編碼解決傳統的字元編碼方案的侷限性,每個字元佔用 2 位元組。這樣理論上一共最多可以表示2^16(即65536)個字元。基本滿足各種語言的使用。

字型定義的細節

其他一些小細節也很重要,譬如定義字型的時候,何時需要在字型兩端新增引號?像這樣:

p{
    font-family: 'Microsoft YaHei', '黑體-簡', '\5b8b\4f53';
}

當字型名字中間有空格,中文名字型及 Unicode 字元編碼表示的中文字型,為了保證相容性,都建議在字型兩端新增單引號或者雙引號。

字型定義順序

字型定義順序是一門學問,通常而言,我們定義字型的時候,會定義多個字型或字體系列。舉個例子:

body {
    font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
}

別看短短 5 個字型名,其實其中門道很深。解釋一下:

使用 tahoma 作為首選的西文字型,小字號下結構清晰端整、閱讀辨識容易;
使用者電腦未預裝 tohoma,則選擇 arial 作為替代的西文字型,覆蓋 windows 和 MAC OS;
Hiragino Sans GB 為冬青黑體,首選的中文字型,保證了 MAC 使用者的觀看體驗;
Windows 下沒有預裝冬青黑體,則使用 ‘\5b8b\4f53’ 宋體為替代的中文字型方案,小字號下有著不錯的效果;

最後使用無襯線系列字型 sans-serif 結尾,保證舊版本作業系統使用者能選中一款電腦預裝的無襯線字型,向下相容。

嗯,其實上面的 font-family 就是淘寶首頁 body 的字型定義,非常的規範,每一個字型的定義都有它的意義。

字型書寫規則

綜上,總結一下,我覺得字型 font-family 定義的原則大概遵循:

1、兼顧中西

中文或者西文(英文)都要考慮到。

2、西文在前,中文在後

由於大部分中文字型也是帶有英文部分的,但是英文部分又不怎麼好看,同理英文字型中大多不包含中文。

所以通常會先進行英文字型的宣告,選擇最優的英文字型,這樣不會影響到中文字型的選擇,中文字型宣告則緊隨其次。

3、兼顧多作業系統

選擇字型的時候要考慮多作業系統。例如 MAC OS 下的很多中文字型在 Windows 都沒有預裝,為了保證 MAC 使用者的體驗,在定義中文字型的時候,先定義 MAC 使用者的中文字型,再定義 Windows 使用者的中文字型。其次很多人都不知道 Android 下沒有預裝微軟雅黑和宋體,那麼 Android 機型下的中文字型設定又是很考究的。

4、兼顧舊作業系統,以字型族系列 serif 和 sans-serif 結尾

當使用一些非常新的字型時,要考慮向下相容,兼顧到一些極舊的作業系統,使用字型族系列 serif 和sans-serif 結尾總歸是不錯的選擇。

這裡推薦一下我的前端技術分享群:731771211,裡面都是學習前端的,如果你想製作酷炫的網頁,想學習程式設計。自己整理了一份2018最全面前端學習資料,從最基礎的HTML+CSS+JS【炫酷特效,遊戲,外掛封裝,設計模式】到移動端HTML5的專案實戰的學習資料都有整理,送給每一位前端小夥伴,有想學習web前端的,或是轉行,或是大學生,還有工作中想提升自己能力的,正在學習的小夥伴歡迎加入學習。

點選:加入