網站的關鍵！教你13步打造優雅的WEB字體

今天，大多數瀏覽器已經默認支持Web字體，日趨增多的字體特性被嵌入最新版HTML和CSS標準中，Web字體即將迎來一個趨于復雜的嶄新時代。下面是一些基本的關于字體的規則，特別適用于Web字體。

印刷字體是靜態的，而網頁字體卻是圓滑可塑的。設計師必須預測跨瀏覽器及終端用戶的最終結果，而不僅限于學習如何實現某種特定的視覺外觀。除了掌握簡單的規則以外，他們一樣要理解背后的原因。

01 了解字體的用途

第一要務是檢查將使用的字體究竟能做什么?；旧纤凶煮w的用途都是相似的，但有些字體比其它更加合適。Unicode編碼的字體提供了成千上萬種字形的可能性，而OpenType字體格式則支持更多的功能，例如小號大寫字母，舊式風格數字，自由連字以及上下文交替等。

然而，字體的質量取決于字體設計師的創造水準。如果設計者忽視了繪制所有必須的字符，或者忘記了創建相關的功能，那么排版的細節問題也就變得意義不大了。創造專業字體需要大量的時間和精力，而有些設計師并未做好充足的準備。

因此，在將字體納入頁面設計前，檢查其字符集和功能的工作就變得舉足輕重。字體就像工具箱，有些時候工具箱幾乎是空的，用途有限，就像字體只有大寫、小寫、數字和一些基本拼寫一樣；有些時候缺少的卻是某些關鍵工具，如果有一把螺絲刀，一把鋸但卻沒有錘子的話，一些釘東西的活就難以完成。

02 巧妙的字集

FF Sero by J?rg Hemker

“字體回滾”（Font Fallbacks）是以單個字符為基準發生的。一旦字符在指定的字體中丟失，回滾系統就會自動從列表中的下一個字體調用這個字符，然后切換回原來的字體。靈活利用這項特性可以達到驚人的效果。舉例來說，字體的字符集不具有舊式風格的數字，那么可以找到具有對應數字的字體；刪減該字體，只留下所需數字，將其放入回滾列表。文本中的所有數字就會以舊式風格的方式呈現，而其余部分將會以正常字體顯示。這可以使你不必對數字進行分別格式化，也擺脫了頁面中多余的HTML標簽。

03 弄懂數字

很多專業級的字體都具有幾個不同的數字字符集。每個字符集都有它特殊的用途。表格式數字占據相同的空間，讓它們垂直排列，而寬度比例數字與其設計相符– 舉例來說，數字4要比1寬得多。一方面，舊式風格數字的設計模仿了帶X高度屬性，上行和下行字母的的小寫字符，使其與大小寫混合的文本完美融合。另一方面，內襯的數字用于數值，或與大寫文本一起使用。

04 切勿偽造字體

FF Ernestine by Nina Stoessinger

CSS使你可以偽造一些事情。如果字體本身沒有粗體的變體，<b>標簽可以通過雙重渲染+略微側移的方式將文本人為地加粗。為沒有斜體樣式的字體加上<i>標簽可以實現斜體效果。由此產生的扭曲字符令人慘不忍睹。

更重要的是避免使用<b>和<i>標簽，而用<strong>和<em>取而代之。前者只涉及字體的外觀，也就是所謂的Bold和Italic. 但或許你只想通過改變顏色和大小的方式強調文本。所以明確你的目的就變得重要了– 加粗字符，抑或強調內容？使用后者賦予你通過CSS文件輕松改變文本外觀的自由。一般來說，在CSS文件里定義所有的文本樣式，盡可能避免局部樣式定義。

05 但如果你必須偽造的話，逼真些

當字符集當中缺少小號大寫字母時，偽造它們總會使其相較周圍字體過于單薄。倘若字體樣式有一個半粗體的變體，或普通和粗體的粗細程度相差無幾，那么可以使用更粗的那個來調節文本的明暗程度。別忘了給小號大寫字母一點額外的字符空間。

06 謹慎使用復制粘貼

有時候你會在頁面中本應是重音或其它特殊字符的地方發現難以辨認的字符。當從文本編輯軟件中復制非UTF-8編碼的文本時會產生這種情況。字符編碼系統將所有的字形映射至給定的字符集，以方便通過網絡或存儲介質傳輸數據(主要是文本或數字)。

盡管HTML可以兼容UTF-8，但它會曲解從其它任意編碼系統中直接復制的文本，將特殊字符變為隨機字母和符號的奇怪組合。此外某些內容管理系統在復制文本的同時也會一并復制格式，造成不可預知的后果。要避免這種問題，最好的辦法是使用簡易文本編輯器將復制的內容轉換為純文字的格式，而后從那里復制并粘貼到CMS當中。

07 學習HTML實體

FF Spinoza by Max Phillips

看看你的鍵盤– 你可能沒有意識到可用的字符是多么豐富。它們當中的很多是被HTML實體定義的，所以熟記常用的實體是必要的– 便于頁面全局排版。你不能直接使用小寫的x代替乘法符號，商標符號不僅僅是一個簡單的大寫T和大寫M，浮動的重音符也不能代替引號。

(編輯：小酷)