字體是網頁設計中最重要的細節

　　一個非創意性質的網頁，最重要的內容，就是文字。出現了文字，就會出現文字排版、字體選擇、字體顏色大小粗細等細節。而這些細節，往往是非常重要的細節。

　　好的字體排版，可以讓人耐心的看完那些文字，然後得到其中的重要信息，還可以影響到浏覽者閱讀的心情。同時，字體的選擇、大小等，還應該配合企業的VI識別系統，還需要配合你作品需要表達的思想感情來確定(例如古典風格，應該選擇哥特式字體等)。

　　好了，關於字體的重要性，我就說這麼多，再多說也是廢話，只要大家知道很重要，要好好選擇調整就好了。

　　字體的分類和格式

　　襯線和無襯線

　　襯線算是一種輔助性的小細節，籠統的談，太過於抽象，我們來看兩個例子：

　　這兩個字體，是有襯線字體，大家可以看到在邊角的位置，會多出一些修飾。這樣的好處就是，可以清晰的分辨出字母和文字，分辨筆劃的起始和終止。但是，這種字體如果設置字體大小太小的話、或者你裡文字較遠，則會受到襯線影響，分辨不清晰。同時，由於中文系統，默認的字體為宋體，見的太多導致審美疲勞，所以襯線字體比較適合打印文字以及正規文檔中使用，通常不太適合使用在網頁中。

　　這兩個字體，就是無襯線字體，沒有邊角的修飾，令人看起來很整齊光滑，沒有毛刺。比較適合用在網頁中，讓浏覽者獲取大量的文字信息而不會疲勞。

　　字體系列

　　字體之間最大的差異並不在於有無襯線，而在於字體與字體之間，形體的差異。但是很多字體(特別是英文字體)之間，差異不大，有些新字體甚至是對已有字體進行了細微的改造後產生的。

　　於是，就把字體分成了幾個大的系列，同一個系列中的字體，大體相同，稱作通用字體系列。其中包括以下五個系列：

　　serif：帶襯線字體。Times New Roman 是默認的 serif 字體，中文字體的話，是宋體、仿宋之類的字體。

　　sans serif：無襯線字體。Arial 是默認的 sans-serif 字體，中文字體中，微軟雅黑、黑體等都是這類字體。

　　monospace：等寬字體。這個字體裡面的每個字母都有相同的寬度。通常用於顯示程序代碼等，Courier 是默認的 monospace 字體。而對於中文，每個漢字都是等寬的。

　　cursive：模仿手寫字體。手寫體，比較個性，通常用於標題、logo等等。這個字體系列沒有默認字體，英文來說，通常用 Comic Sans，中文的話，行書系列、草書系列的字體等，都可以算作手寫字體。

　　fantasy：裝飾用字體。多數用於標題，極具個性，字體繁多，藝術字體。無法對其的大小、形狀下一個統一的定論，所以沒有默認字體，在網頁中，也通常很少用到，除非你有特殊的用處創意性的設計。

　　關於通用字體系列的更多解釋、描述和字體舉例，推薦大家查看在 W3school 上的資料。

　　字體的格式

　　格式就是指字體表現出來的粗細、寬度和姿態等等特征。看下面的這張圖片：

　　裡面的字，是相同大小的，同時排放在一條豎線上。為其應用了四種不同的字體後，體現出來了不同的形態和粗細大小。在中文字體中，不同的字體，在字間距中通常沒有很大的變化。而在英文字體中，不同的字體會改變字母的大小，導致整體的尺寸布局不同，進而導致整個排版混亂。

　　相同的字體大小，在不同的字體下面，顯示的效果幾乎完全不同。這是英文字體選擇中，比較麻煩和頭疼的問題。

　　字體的選擇

　　上面的這些理論，從某些角度和意義上來說，都是廢話。如何選擇合適的字體，才真正切合實際。那麼我們應該如何選擇在網頁中使用的字體呢?

　　解決這個問題，我們先應該知道為什麼要糾結於選擇字體這個問題。我個人認為應該存在 實用性 和 創意性 這兩個方面的因素。創意性很好理解，就是想突破常規，配合自己的網頁中的設計思想而選擇相應的字體，例如表達程序員的思維，就對代碼使用等寬字體，表達恐怖、古典，使用哥特式字體等等。這點自己去找字體好了，不再贅述。最主要的問題是在於 實用性 的方面。

　　實用性問題，即不需要太過於華麗的字體，只需要大家看的都舒服、稍微帶點自己的特色即可。你會說，很容易啊，直接 CSS 定義一條，填上個字體就好了。如果真這樣，那就太好了。浏覽器解析字體的過程實際上是這樣的，當浏覽器加載 CSS 後，解析到有關字體的樣式，它會在你的系統中查找這個字體，只有找到了相應的字體文件，才會根據那個字體文件對網頁中的文字進行渲染，顯示出你想要的效果。

　　既然這樣，如果你的操作系統中，並沒有安裝網頁中定義的那種字體，就無法渲染出那種字體的效果，而通常使用當前系統的默認字體來渲染。那麼你原有的設計，就不行了，你設計時覺得挺好，字體、位置、大小合適，但在別人的電腦上，清一色的宋體。所以這個問題，才是選擇字體的難處所在。當然，有問題就有解決方式：

　　使用經典通用字體

　　不同操作系統都有不同的字體系統，但既然是字體，總有一些比較經典老牌的字體共同存在於各個系統中。例如無襯線的 Arial 字體，它產生的時間比較早，同時價格低廉，所以從早期就被 windows 操作系統使用，在其他的操作系統中，也會有較好的不同於默認字體的顯示效果。所以 我愛水煮魚、潛行者m博客 這些網站，直接在 CSS 中聲明使用一個字體：Arial。

　　使用多個字體屬性

　　上面的方法很簡單，但是不靈活，注重簡單而不注重細節。CSS 做的很好，它可以在一個網頁中，聲明指定多個字體，這樣當寫在前面的字體，在當前操作系統中沒有的話，就會使用後面字體頂替。所以當你看一些網頁作品的時候，會發現它的 CSS 中的 font-family 屬性，指定了一大堆的 字體 名稱。但這個也不是可以隨便指定的，也有一些注意事項。

　　你應該這樣做，先確定你網頁中需要用到的字體，然後確定屬於哪個字體系列有無其他的相近字體以及衍生字體，然後編寫字體屬性。順序如下：最想用的字體》》可以代替的相近字體》》相近通用字體。例如如下寫法：

　　font-family： Times， TimesNR， ‘New Century Schoolbook’，Georgia， ‘New York’， serif;

　　這樣的意思就是，優先使用 Times 字體，然後系統沒有的話，查找同型異名的 TimesNR 字體，如果沒有，尋找系統中的相近字體 New Century Schoolbook 等其他字體，最後如果都無法找到，就使用通用字體 serif ，這樣浏覽器就會尋找系統中的 無襯線 的默認字體，來代替。

　　字體的大小選擇

　　形容字體大小的單位

　　在 CSS 中，最常用的描述字體大小的單位有兩個：em、px。通常認為 em 為相對大小單位，px 為絕對大小單位。但從實際應用中來講，px 像素其實也是一種相對大小單位。例如，在一塊15寸分辨率為 800×600 像素的屏幕上，10px 大小的文字，要比一塊10寸分辨率 1024×768 像素的屏幕上的 10px 大小的文字顯得更大一些。下面來說一下它們的區別和用法等。

　　px：像素單位，10px 表示10個像素大小，在現在的網頁設計中，常被用來表示字體大小。很方便很直觀，但是有一些弊端。對於可用性不太友好，因為是“絕對”單位，所以有些浏覽器(早期)的字體放大縮小功能失效。浏覽器的默認字體大小為 16px ，早期的網頁，由於屏幕分辨率比較低，通常采用12px作為網頁正文的標准字體大小。但是在現在，感覺有點偏小，比較長的文章來說，浏覽者看起來費勁。現在我更主張使用 14px 作為標准字體，16px 作為中等字體，18px 作為較大字體，12px 作為偏小字體比較合適。

　　em：相對大小，它表示的字體大小不固定，根據基礎字體大小進行相對大小的處理。浏覽器默認的字體大小為 16px，如果你對一段文字指定 1em，那麼表現出來的就是 16px大小，2em 就是 32px 大小。相對大小單位有很廣泛的用途，由於它的相對性，所以對跨平台跨設備的字體大小處理上有得天獨厚的優勢，同時對於響應式的布局設計也有很大的幫助。但是缺點很明顯，你無法直觀的看到大小，而且對於不同的大小，你需要精確的計算。

　　字體實際表現出來的大小

　　上面只是說了兩種形容字體大小的單位，但實際上表現出來的字體大小，並非簡單的單位前面的數值。除了數值之外，潛行者m 個人認為還跟 設備 和 視距 有關。

　　設備就是指顯示設備的分辨率及屏幕大小，跟前面解釋 px 單位的相對性相同，如果在一塊非常大的分辨率非常低的屏幕(像廣場電子屏)，即使很小的像素，也會展示出很大的字。這也就是為什麼早期的 800×600 像素橫行的時候，大家都是用12px大小的原因。因為顯示的文字已經夠大了。

　　視距就是指浏覽者看文字的距離。很明顯的道理，眼睛距離屏幕越遠，看起來上面的文字就變小了。

　　所以在選擇網頁中字體大小的時候，還需要考慮你的用戶的實際使用習慣。同一個網頁，在筆記本上和在手機上使用的時候，字體大小就不應該相同，因為電腦屏幕大分辨率高，而且視距通常比較近而且固定，手機等屏幕小分辨率較低，視距更近(大家都喜歡躺