網頁設計中文本的處理

在網頁設計中，文本的設定通常並不會受到十分的重視，因為這件事看起來比畫banner大圖簡單多了，但反過來講，處理文本不會只從美觀出發，還要有工程實現、各種設備適配之類的諸多考量，經驗不足的設計師偶爾就會有些拿捏不準了。

最近在工作中遇到了一點有關網頁文本的小問題，趁機複習了一下相關內容，在這裡，從文本的字體、字型大小、顏色三個方面，理一理網頁設計中常用的文本設計規範。

1.字體

首先從字體開始，不同操作系統、不同瀏覽器有不同的默認顯示字體，即使相同字體，在不同平台中的渲染效果也不盡相同。

設計師在實現設計稿時，應該根據針對平台的不同，調整字體使用，以保持設計稿和用戶最終所見效果的一致。

1.1 各平台系統字體

在做設計時，設計師最擔心的就是使用了用戶設備系統中不存在的字體，尤其是一些支持字符集有限的字體，然後實現出來統統顯示宋體還罷了，說不定滿屏都是%&**。在這裡先介紹一下各平台系統字體，可以認為將文本指定為這些字體是安全的。

Window下：

• 微軟雅黑（"Microsoft Yahei"）：從大學第一台PC機就伴隨著我們的微軟雅黑，從字體設計上講屬於無襯線黑體，字形方正飽滿，中規中矩，與著名的「方正蘭亭黑系列字體」系出同源，前者針對屏幕顯示，後者針對印刷用。雅黑擁有 Regular、Bold 兩種粗細的字重，從Win8開始，又加入了 Light 這款更細的字重。一些設計師可能在自己的字體列表鍾中見過Microsoft Yahei 的孿生兄弟，Microsoft Yahei UI，這兩款字體的漢字基本基本相同，只在數字字型和中文引號上有所差別。在開啟了ClearType的系統中，雅黑有最佳的顯示效果，同時雅黑也有一些不足，如字形平淡到有點獃滯，標點怪異、英文設計不考究等。
• 宋體（SimSun）：又稱中易宋體，在微軟雅黑問世前，曾長期作為簡體中文版Windows平台的默認字體。宋體在使用中最大的局限在於，其最佳字體大小十分有限：字型大小在11px以下時，宋體無法正常看清；字型大小在12px~17px區間內時，宋體為點陣效果，顯示效果尚可；字型大小大於17px時，宋體的筆劃有殘缺、斷裂、粗細不均的問題。
• Arial：Win平台上默認的無襯線英文字體，比例和字重與Helvetica十分相近，但個別字母美觀度欠佳，並且有大寫I與小寫L難以分辨的bug，因此有時會被下邊提到的兩種無襯線西文字體取代；有Arial Black、Arial Narrow等變體。
• Tahoma：十分常見的無襯線字體，這個字體比較均衡，中英文混排顯示時，不會出現中英文不對齊的狀態。被採用為Windows 2000、Windows XP、Windows Server 2003及Sega遊戲主機Dreamcast等系統的預設字型；。
• Verdana：無襯線字體，微軟公司專門為屏幕顯示而開發的。即使字型大小很小，仍有結構清晰、容易辨識等高品質的表現，所以是顯示器中最清晰的字體。

Mac OS下：

• 華文黑體（STHeiti）、華文細黑（STXihei）：屬於同一字體家族系列，OS X 10.6 之前的簡體中文系統界面默認字體。對於華文黑體的使用，存在兩個爭議，一是廣受詬病的喇叭口，華文黑體問世之初是為印刷服務的，明顯的喇叭口的設計可以保證其紙張列印出來時的末端筆劃形狀完整，但是當用作UI字體時，喇叭口就顯得多餘了，反而會影響字形展現，造成小字型大小糊成一團、文本段落灰度不均的現象；二是華文黑體略緊的間架結構和喇叭口，限制了筆畫的粗細變化，導致字重選擇過少，可以使用的只有常規體和細體，嚴重不夠用。iOS 7 里增加的Thin和UltralLight兩個字重，個別筆畫可以說是細若遊絲了。
• 黑體-簡（Heiti SC）：從 10.6 開始，黑體-簡代替華文黑體用作簡體中文系統界面默認字體。從設計上來說，黑體-簡是華文黑體和華文細黑組合而成，其中華文黑體相當於Heiti SC Medium，華文細黑相當於Heiti SC Light。
• 冬青黑體（ Hiragino Sans GB ）：屬於兼容屏幕顯示與印刷的襯線黑體，有很微妙的喇叭口，字面比例合理。冬青黑體源自日文字體Hiragino Kaku Gothic，保留了一部分日文字體設計的風格，使其外觀別具風格，因此受到一些設計師青睞。字重有regular（W3）和bold（W6） 兩種。
• 蘋方（PingFang SC）：無襯線黑體，是蘋果在iOS9和Mac OS X EL Capitan上為中文用戶量身定做的字體，去掉了喇叭口，整體造型看上去更加簡潔，提供比較豪華的字重陣容：極細體、纖細體、細體、常規體、中黑體、中粗體。相對於華文黑體、冬青黑體，蘋方的字面稍大一點點，筆畫排布經過調整，基本避免了排版黑塊。
• Helvetica、Helvetica Neue：Helvetica是一種被廣泛使用的的無襯線西文黑體字體，風格簡潔樸素，曾被譽為最受歡迎的英文字體，在平面設計和商業領域有著深遠影響，並長期作為Mac OS系統的默認字體。Helvetica Neue為Helvetica的改善版本，增加了更多不同粗細與寬度的字形，共擁有51種字體版本，極大的滿足了日常的使用，如果您的字體列表中同時有這兩種字體，基本可以不使用Helvetica了。
• San Francisco：與蘋方同時發布的西文字體，San Francisco不是單一的字體，SF字族包括為 iOS 與 OS X 設計的 SF，以及爲 watchOS 設計的 SF Compact，各自分是 Text 與 Display。其中SF與 SF Compact 最大的區別在於，後者豎向的筆畫是直的，這樣增加了字母之間的距離，有助於在小字型大小下提升辨識度；SF Text 與 SF Display 分別是正文字體與標題字體，在設計上有大量細微差異；SF Text有6種字重，每種字重有對應的斜體，SF Display有9種，字形選擇非常豐富。實際應用時， iOS 與 OS X 系統會根據UI文本屬性和字型大小（大於20pt用Display，小於20pt用Text）自動轉換字體，所以系統開發者不需要為此費神，但網頁中需要手動指定。對設計師來說出圖時一直需要注意，畢竟製圖軟體不是自動的。SF從字體形態上看於Helvetica很相近，最大的不同在於，San Francisco完全為數字時代而生，是一款可以根據環境變化自動轉換字形的動態、智能的字體。下圖摘自蘋果官方介紹San Francisco字體的keynote，下載地址：WWDC 2015 - Videos。

• Times New Roman：Mac平台Safari下默認的字體，可能是最常見且廣為人知的經典襯線字體之一（理論上來說大家的畢業論文正文中英文部分都是用的這個字體），外觀中規中矩、四平八穩。

總體來說，在Windows和Mac OS平台上，黑體都是界面設計的主力字體，下圖是前文提到的幾種黑體中西文字體的字形對比。

列舉了這麼多系統字體，說到其中孰優孰劣，就是一個見仁見智的問題了，並無定論，上文中陳述語氣或有偏頗請見諒；並且，對於UI設計來說，字體是工具而不是藝術品，根據應用場景選擇合適的字體，比選擇好看的字體更有意義。

除去以上這些安全字體，現在通過 CSS3，web 設計師可以可將希望使用的字體文件存放到 web 伺服器上，它會在需要時被自動下載到用戶的計算機上，但對於字符集巨大的中文字體來說，載入成本值得考慮。

1.2 網頁開發中字體的選擇

大家都知道，網頁中顯示的文本，最終是由前端開發搞上去的，嘗試從工作夥伴的角度去理解網頁中的文本設定，或許能給我們帶來新的啟發。

在具體的網頁開發中，CSS用font-family 規定元素的字體系列。

font-family 可以儲存一個包含多個字體的列表，這樣當在用戶設備上找不到第一個指定的字體時，會自動調用列表中的下一個字體。由此開發者通常會把一些系統默認字體如中文的微軟雅黑、英文的Arial作為回退方案，放在字體列表最後一位，以控制界面在用戶終端上的顯示效果。

例如，知乎的文字樣式是這樣指定的：

font-family Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans CJK SC, WenQuanYi Micro Hei, Arial, sans-serif;

可以看到列表中幾乎包含了各系統主流的中英文黑體字體，除了上文中提到的Win和Mac OS系統字體，還包括安卓系統字體思源黑體（Noto Sans CJK SC），以及Linux 系統適用的文泉驛微米黑（WenQuanYi Micro Hei），以保持網頁在各個系統中渲染時都能取到相對最佳的字體，並利用字體列表的順序，給效果更好的字體以優先取用的位置。

另外，一個細節是，列表中先聲明了英文字體「Helvetica Neue」，先聲明英文字體在網頁開發中是一個慣例，這是因為，大部分英文字體不包含中文，被廣泛應用的Helvetica以及Arial也是如此；同時，大部分中文字體雖然包含英文，卻很醜，比如微軟雅黑的英文。先對英文字體進行聲明，可以保證文本中英文部分優先選用到最佳的英文字體，並且不會影響到後邊中文字體的聲明。

以上內容好像有點拗口，總的來說，對於設計師的啟示可以概括為兩點：

1. 出完設計稿，在提供給前端的設計規範中，針對文本我們可以選擇提供一個字體列表，在列表中，將多種中英文字體按照實現效果的理想程度進行排序；相對於直接指定一種字體來說，這種做法顯得更靈活，更能保證最終用戶所見的頁面效果相對理想。

2. 一般來說，設計稿呈現的是頁面的最佳效果，因此對於專業的設計師，在設計稿中，有必要把英文挑出來，使用專門的英文字體，以達到理想的美觀度。

英文字體用錯了，甲方可能看不出來，但是對pixel眼的設計師同行來說，真的很刺眼。

在上文文字樣式的設定最後可以看到「sans-serif」一詞，sans-serif（無襯線體）對於設計師們來說不是一個陌生的名詞，與列表中其他詞條不同，sans-serif不是一種特定字體，而是字體系列的代稱。CSS中，除了各種特定的字體系列外，還定義了5種通用字體系列：

• Serif 字體：襯線字體，如中文的宋體、仿宋，英文的Times New Roman。
• Sans-serif 字體：無襯線字體，如中文的各種黑體，英文的Arial、Helvetica。
• Moonscape 字體：等寬字體。這個字體裡面的每個字母都有相同的寬度。通常用於顯示程序代碼等，Courier 是默認的 moonscape 字體。而對於中文，每個漢字都是等寬的。
• Cursive 字體：模仿手寫字體。這個字體系列沒有默認字體，英文中通常用 Comic Sans，中文中行書系列、草書系列的字體等，都可以算作手寫字體。
• Fantasy 字體：裝飾用字體。

針對主要由文本信息構成的內容型網站，指定字體系列而不指定特定字體，也是一種常見的做法，比如，指定文本使用一種Sans-serif 字體，這樣瀏覽器就會從sans-serif 字體系列中選擇一個字體（如 Helvetica）應用到該文本。

目前市場上部分瀏覽器已經支持用戶對每個字體系列的默認字體進行自定義，下圖為QQ瀏覽器for Mac的字體系列設置頁面。

有必要提一句：做為一隻藝術生出身的設計師，我對於技術流的理解也只有到這個地步而已！

如有失誤之處，請在留言中賜教，O(∩_∩)O謝謝。

2. 文本大小

第一部分那麼長你們是不是已經忘了還會有第二部分……

網頁設計中，設計師通常有習慣使用的字型大小，比如常見的一種規範：使用 14px 作為標準字體，16px 作為中等字體，18px 作為較大字體，12px 作為偏小字體。

但網頁的實際應用中，文字大小不只與px數值有關，與設備解析度和視距都有一定關係。

首先，Px單位其實是一種相對大小單位，例如，同樣的12px大小的文字，在低解析度的屏幕上會比在高解析度的屏幕上顯得更大一些。

另外，當設備屏幕越來越小時，用戶使用的時候可能會拿得更近，這樣視角更大，減小了小字型大小帶來的不便，典型的例子就是手機，把手機放在筆記本屏幕旁，對比可以發現手機上文本的物理尺寸比電腦上小得多，但用戶並沒有感覺異常。

基於以上這些因素，設計師在設定字型大小時，需要把目標用戶的設備情況、使用場景都納入考量；如果希望實現不同屏幕解析度下自動調整字型大小，可以在網頁開發中使用新的字體相對單位rem和絕對單位px相結合，rem（font size of the root element）是指相對於根元素的字體大小的單位，在移動端網頁適配里有很大的優勢。關於rem單位的資料可以參見這個問題：

css3的字體大小單位[rem]到底好在哪？

3. 文本顏色

粗略地說，在界面中的文字分為三個層級，主文、副文、提示文案；在白色的背景下，字體的顏色層次其實就是黑、深灰、灰色，例如一組常用的色值：#333333，#666666，#999999。

如百度貼吧頁面，貼吧標題填充#333333；帖子列表中，帖子標題填充表示可點擊的鏈接色，內文摘要屬於描述文字，填充#666666，作者、發帖時間等更次要的信息填充#999999。

以及一到兩個鏈接色，鏈接色為站點根據主題風格設定的顏色，一本是對比度強、比較醒目的顏色，沒有固定的色值，常見的鏈接色包括藍色#0000cc（百度搜索結果頁）、紅色#ff4400（淘寶網）等。

值得注意的是，純黑色#000000在網頁中的應用比較少，一般以近似黑色的深灰代替，如#333333等；原因是純白背景上直接放置純黑色字體，在屏幕上會略顯刺眼，尤其是大段文本。

實際應用中，有的網站會在主文中以微妙的明度差別，區分不同信息的層次，如知乎的問題頁面，問題標題填充顏色更深一些的#1e1e1e，問題補充文字內容填充稍淺#262626。類似的做法在其他站點中也很常見，色值並沒有一定之規。

4. 結尾

啰啰嗦嗦說到最後，在這裡推薦一款瀏覽器書籤欄工具，Whatfont，安裝後點擊圖標開啟插件，再點擊網頁上的文本，就可以告訴你所指字體的屬性，字體字型大小顏色統統都有，非常方便，目前可以支持的瀏覽器包括chrome、safari、firefox。使用這款插件，朋友們可以在平時瀏覽網頁時隨時關注一下頁面效果和對應的文本屬性，總結出自己常用的文本設計規範。

Whatfont下載地址：http://www.chengyinliu.com/whatfont.html