在網站設計中，字體（Typography）是用戶體驗和品牌傳達的核心要素之一。印刷字體是靜態(tài)的，而網頁字體卻是油滑可塑的。規(guī)劃師有必要預測跨瀏覽器及終端用戶的終究成果，而不僅限于學習怎么完成某種特定的視覺外觀。除了把握簡略的規(guī)矩以外，他們相同要了解背后的原因。

印刷字體是靜態(tài)的，而網頁字體卻是油滑可塑的。規(guī)劃師有必要預測跨瀏覽器及終端用戶的終究成果，而不僅限于學習怎么完成某種特定的視覺外觀。除了把握簡略的規(guī)矩以外，他們相同要了解背后的原因。

01 了解字體的用處

第一要務是查看將運用的字體終究能做什么。根本上一切字體的用處都是相似的，但有些字體比其它愈加適宜。Unicode編碼的字體供給了成千上萬種字形的或許性，而OpenType字體格局則支撐更多的功用，例如小號大寫字母，老式風格數字，自在連字以及上下文替換等。

但是，字體的質量取決于字體規(guī)劃師的發(fā)明水準。假如規(guī)劃者忽視了繪制一切有必要的字符，或許忘記了創(chuàng)立相關的功用，那么排版的細節(jié)問題也就變得意義不大了。發(fā)明專業(yè)字體需求大量的時間和精力，而有些規(guī)劃師并未做好充足的預備。

因而，在將字體納入頁面規(guī)劃前，查看其字符集和功用的作業(yè)就變得舉足輕重。字體就像東西箱，有些時分東西箱幾乎是空的，用處有限，就像字體只有大寫、小寫、數字和一些根本拼寫相同；有些時分短少的卻是某些關鍵東西，假如有一把螺絲刀，一把鋸但卻沒有錘子的話，一些釘東西的活就難以完成。

02 奇妙的字集

FF Sero by Jörg Hemker

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

03 弄懂數字

許多專業(yè)級的字體都具有幾個不同的數字字符集。每個字符集都有它特別的用處。表格局數字占據相同的空間，讓它們筆直擺放，而寬度比例數字與其規(guī)劃相符– 舉例來說，數字4要比1寬得多。一方面，老式風格數字的規(guī)劃模仿了帶X高度屬性，上行和下行字母的的小寫字符，使其與巨細寫混合的文本完美融合。另一方面，內襯的數字用于數值，或與大寫文本一同運用。

04 切勿假造字體

FF Ernestine by Nina Stoessinger

CSS使你能夠假造一些工作。假如字體自身沒有粗體的變體，標簽能夠經過兩層渲染+略微側移的方法將文本人為地加粗。為沒有斜體款式的字體加上標簽能夠完成斜體作用。由此發(fā)生的扭曲字符令人不忍目睹。

更重要的是防止運用和標簽，而用和取而代之。前者只觸及字體的外觀，也就是所謂的Bold和Italic. 但或許你只想經過改動顏色和巨細的方法著重文本。所以清晰你的目的就變得重要了– 加粗字符，抑或著重內容？運用后者賦予你經過CSS文件輕松改動文本外觀的自在。一般來說，在CSS文件里界說一切的文本款式，盡或許防止部分款式界說。

05 但假如你有必要假造的話，逼真些

當字符集傍邊短少小號大寫字母時，假造它們總會使其相較周圍字體過于單薄。假使字體款式有一個半粗體的變體，或普通和粗體的粗細程度相差無幾，那么能夠運用更粗的那個來調節(jié)文本的明暗程度。別忘了給小號大寫字母一點額定的字符空間。

06 慎重運用仿制粘貼

有時分你會在頁面中本應是重音或其它特別字符的地方發(fā)現難以辨認的字符。當從文本編輯軟件中仿制非UTF-8編碼的文本時會發(fā)生這種狀況。字符編碼體系將一切的字形映射至給定的字符集，以便利經過網絡或存儲介質傳輸數據(主要是文本或數字)。

雖然HTML能夠兼容UTF-8，但它會誤解從其它任意編碼體系中直接仿制的文本，將特別字符變?yōu)殡S機字母和符號的古怪組合。此外某些內容管理體系在仿制文本的一起也會同時仿制格局，形成不行預知的結果。要防止這種問題，好的辦法是運用簡易文本編輯器將仿制的內容轉換為純文字的格局，然后從那里仿制并粘貼到CMS傍邊。

07 學習HTML實體

FF Spinoza by Max Phillips

看看你的鍵盤– 你或許沒有意識到可用的字符是多么豐富。它們傍邊的許多是被HTML實體界說的，所以熟記常用的實體是必要的– 便于頁面大局排版。你不能直接運用小寫的x替代乘法符號，商標符號不僅僅是一個簡略的大寫T和大寫M，起浮的重音符也不能替代引號。

08 正確的引證

說到撇號，正確的方法應該是閉合單引號。一個凸顯出不成熟的例子是直引號的運用，它一起也被注重方法的規(guī)劃師稱為‘啞巴引號’。但是，運用適宜的卷曲單引號或雙引號是不行的。不同的言語有不同的引號運用方法。舉例來說，法語運用的引號是指向外側的三角標識符，而在德語中引號的方向則指向外側。

09 了解破折號

連字符用來連接鄰接的詞語，或用于長單詞跨行，以及其它用處。有兩種其它的水平破折號：en破折號一般為em破折號的一半長度。通常狀況下咱們用它來指示數值的閉合規(guī)模，表明負數，或許闡述兩件工作之間的聯(lián)絡。em破折號一般和字體等寬，而且一般用于劃定某種想法的中止，形成嵌入句子中的獨立實體。但其詳細用法常常引發(fā)爭論。有些人用em破折號替代en，雖然兩者都應該在沒有鄰接空白的狀況下運用，許多字體規(guī)劃者寧愿參加纖細的空白來防止它們觸碰鄰接的字符。

10 界說聯(lián)系，而非肯定尺度

Web文本的大優(yōu)勢之一就是它能夠被用戶調整。假如字體是基于像素界說的，縮放一個頁面或許會引起不同文本款式間的相對巨細差異，舉例來說，正文字號或許會大過標題字號。用相關于規(guī)范正文字號的em來界說一切文本是非常關鍵的。這保證了網頁中的一切文本均可發(fā)生對應的調整，尊重不同文本字號間的聯(lián)系。

11 操控換行

FF Spinoza by Max Phillips

縮放瀏覽器窗口會使文本框變得寬闊或擁堵，而終端用戶也能夠改動字體巨細。這或許令你覺得換行是難以掌控的。但當你對期望到達的終究作用有一個完全的了解今后，某些特定方面是能夠操控的。

換行呈現在被p或div標簽環(huán)繞段落的結束。在其它狀況下，很少有期望下個單詞能從新一行開始而插入換行的做法，因而請慎重運用
標簽。常見的原因是要將2個或多個單詞放在一同。不間斷式空格能夠保證鄰接單詞永遠處在同一行。惋惜的是不間斷式連字符尚未被界說為HTML字符實體。別的，軟連字符或自在裁量連字符只應在必要時呈現，當文本列過于擁堵，期望分割開超長單詞時，它們就可派上用場。

12 留意空格

非間斷空格(nbsp)并非HTML中可用的唯一一種空格字符。全角空格(em space)和字體等寬，能夠形成一個完美的方形分隔符。半角空格(en space)的寬度是它的1/2。表格局文本傍邊有用的是數字式空格(figure space)，和字體中的數字占據相同巨細的空間；而標點式空格(punctuation space)與點、逗號的寬度持平；薄空格(thin space)能夠在人名縮寫中的點和下一個字母之間運用，而發(fā)絲式空格(hair space)能夠將長破折號與相鄰的字符分開。還有3倍、4倍、6倍于每全角寬度的空格…

關于閱讀體驗而言，字符之間與內部的距離與字符自身同樣重要。正確的層次結構是字距<詞距<行距。應防止在字母之間添加空格，這會令單詞離隔并影響可讀性。增加字距只能保證對字號很小的文本發(fā)生影響。與之相對的是顯現尺度常常受益于嚴密的擺放，但同樣要適度。

渙散對齊會對文本的外觀發(fā)生不利的影響。在對齊文本使之適應行寬的時，詞距被擴大，犬牙交錯的空白渙散在文本行傍邊。這令文本的外觀變得不均衡，某些文本行中甚至會發(fā)生丑陋的間隔。左對齊/右未對是更易于閱讀的擺放方法。

除了字距和詞距以外，行距相同會影響可讀性。過于擁堵的文本行會令文本變得不易分辨。不和來看，假如行距過寬，關于讀者而言，準確找到每個換行之后的下一行將會感到困難。

13 再進一步

這些小貼士現已能夠幫你發(fā)明出愈加精密的網頁字體作用，但需求學習的東西仍然許多。當你對字體準則了解愈加深化，更有自信地運用它們時，你就會理解怎么去嘗試并拓寬自己的視野。這方面的一本權威教程是剛剛發(fā)行不久的Inside Paragraphs: Typographic Fundamentals，作者為Cyrus Highsmith. 這本寶典和Robert Bringhurst的基礎教程The Elements of Typographic Style，或 Erik Spiekermann 和 E.M. Ginger’s所著的Stop Stealing Sheep & Find Out How Type Works是絕配。最終記得在多設備實機測試效果！