一個(gè)非創(chuàng)意性質(zhì)的網(wǎng)頁，最重要的內(nèi)容，就是文字。出現(xiàn)了文字，就會(huì)出現(xiàn)文字排版、字體選擇、字體顏色大小粗細(xì)等細(xì)節(jié)。而這些細(xì)節(jié)，往往是非常重要的細(xì)節(jié)。
好的字體排版，可以讓人耐心的看完那些文字，然后得到其中的重要信息，還可以影響到瀏覽者閱讀的心情。同時(shí)，字體的選擇、大小等，還應(yīng)該配合企業(yè)的VI識(shí)別系統(tǒng)，還需要配合你作品需要表達(dá)的思想感情來確定(例如古典風(fēng)格，應(yīng)該選擇哥特式字體等)。
好了，關(guān)于字體的重要性，我就說這么多，再多說也是廢話，只要大家知道很重要，要好好選擇調(diào)整就好了。
字體的分類和格式
襯線和無襯線
襯線算是一種輔助性的小細(xì)節(jié)，籠統(tǒng)的談，太過于抽象，我們來看兩個(gè)例子：
這兩個(gè)字體，是有襯線字體，大家可以看到在邊角的位置，會(huì)多出一些修飾。這樣的好處就是，可以清晰的分辨出字母和文字，分辨筆劃的起始和終止。但是，這種字體如果設(shè)置字體大小太小的話、或者你里文字較遠(yuǎn)，則會(huì)受到襯線影響，分辨不清晰。同時(shí)，由于中文系統(tǒng)，默認(rèn)的字體為宋體，見的太多導(dǎo)致審美疲勞，所以襯線字體比較適合打印文字以及正規(guī)文檔中使用，通常不太適合使用在網(wǎng)頁中。
這兩個(gè)字體，就是無襯線字體，沒有邊角的修飾，令人看起來很整齊光滑，沒有毛刺。比較適合用在網(wǎng)頁中，讓瀏覽者獲取大量的文字信息而不會(huì)疲勞。
字體系列
字體之間最大的差異并不在于有無襯線，而在于字體與字體之間，形體的差異。但是很多字體(特別是英文字體)之間，差異不大，有些新字體甚至是對(duì)已有字體進(jìn)行了細(xì)微的改造后產(chǎn)生的。
于是，就把字體分成了幾個(gè)大的系列，同一個(gè)系列中的字體，大體相同，稱作通用字體系列。其中包括以下五個(gè)系列：
serif：帶襯線字體。Times New Roman 是默認(rèn)的 serif 字體，中文字體的話，是宋體、仿宋之類的字體。
sans serif：無襯線字體。Arial 是默認(rèn)的 sans-serif 字體，中文字體中，微軟雅黑、黑體等都是這類字體。
monospace：等寬字體。這個(gè)字體里面的每個(gè)字母都有相同的寬度。通常用于顯示程序代碼等，Courier 是默認(rèn)的 monospace 字體。而對(duì)于中文，每個(gè)漢字都是等寬的。
cursive：模仿手寫字體。手寫體，比較個(gè)性，通常用于標(biāo)題、logo等等。這個(gè)字體系列沒有默認(rèn)字體，英文來說，通常用 Comic Sans，中文的話，行書系列、草書系列的字體等，都可以算作手寫字體。
fantasy：裝飾用字體。多數(shù)用于標(biāo)題，極具個(gè)性，字體繁多，藝術(shù)字體。無法對(duì)其的大小、形狀下一個(gè)統(tǒng)一的定論，所以沒有默認(rèn)字體，在網(wǎng)頁中，也通常很少用到，除非你有特殊的用處創(chuàng)意性的設(shè)計(jì)。
關(guān)于通用字體系列的更多解釋、描述和字體舉例，推薦大家查看在 W3school 上的資料。
字體的格式
格式就是指字體表現(xiàn)出來的粗細(xì)、寬度和姿態(tài)等等特征。看下面的這張圖片：
里面的字，是相同大小的，同時(shí)排放在一條豎線上。為其應(yīng)用了四種不同的字體后，體現(xiàn)出來了不同的形態(tài)和粗細(xì)大小。在中文字體中，不同的字體，在字間距中通常沒有很大的變化。而在英文字體中，不同的字體會(huì)改變字母的大小，導(dǎo)致整體的尺寸布局不同，進(jìn)而導(dǎo)致整個(gè)排版混亂。
相同的字體大小，在不同的字體下面，顯示的效果幾乎完全不同。這是英文字體選擇中，比較麻煩和頭疼的問題。
字體的選擇
上面的這些理論，從某些角度和意義上來說，都是廢話。如何選擇合適的字體，才真正切合實(shí)際。那么我們應(yīng)該如何選擇在網(wǎng)頁中使用的字體呢?
解決這個(gè)問題，我們先應(yīng)該知道為什么要糾結(jié)于選擇字體這個(gè)問題。我個(gè)人認(rèn)為應(yīng)該存在 實(shí)用性 和 創(chuàng)意性 這兩個(gè)方面的因素。創(chuàng)意性很好理解，就是想突破常規(guī)，配合自己的網(wǎng)頁中的設(shè)計(jì)思想而選擇相應(yīng)的字體，例如表達(dá)程序員的思維，就對(duì)代碼使用等寬字體，表達(dá)恐怖、古典，使用哥特式字體等等。這點(diǎn)自己去找字體好了，不再贅述。最主要的問題是在于 實(shí)用性 的方面。
實(shí)用性問題，即不需要太過于華麗的字體，只需要大家看的都舒服、稍微帶點(diǎn)自己的特色即可。你會(huì)說，很容易啊，直接 CSS 定義一條，填上個(gè)字體就好了。如果真這樣，那就太好了。瀏覽器解析字體的過程實(shí)際上是這樣的，當(dāng)瀏覽器加載 CSS 后，解析到有關(guān)字體的樣式，它會(huì)在你的系統(tǒng)中查找這個(gè)字體，只有找到了相應(yīng)的字體文件，才會(huì)根據(jù)那個(gè)字體文件對(duì)網(wǎng)頁中的文字進(jìn)行渲染，顯示出你想要的效果。
既然這樣，如果你的操作系統(tǒng)中，并沒有安裝網(wǎng)頁中定義的那種字體，就無法渲染出那種字體的效果，而通常使用當(dāng)前系統(tǒng)的默認(rèn)字體來渲染。那么你原有的設(shè)計(jì)，就不行了，你設(shè)計(jì)時(shí)覺得挺好，字體、位置、大小合適，但在別人的電腦上，清一色的宋體。所以這個(gè)問題，才是選擇字體的難處所在。當(dāng)然，有問題就有解決方式：
使用經(jīng)典通用字體
不同操作系統(tǒng)都有不同的字體系統(tǒng)，但既然是字體，總有一些比較經(jīng)典老牌的字體共同存在于各個(gè)系統(tǒng)中。例如無襯線的 Arial 字體，它產(chǎn)生的時(shí)間比較早，同時(shí)價(jià)格低廉，所以從早期就被 windows 操作系統(tǒng)使用，在其他的操作系統(tǒng)中，也會(huì)有較好的不同于默認(rèn)字體的顯示效果。所以 我愛水煮魚、潛行者m博客 這些網(wǎng)站，直接在 CSS 中聲明使用一個(gè)字體：Arial。
使用多個(gè)字體屬性
上面的方法很簡單，但是不靈活，注重簡單而不注重細(xì)節(jié)。CSS 做的很好，它可以在一個(gè)網(wǎng)頁中，聲明指定多個(gè)字體，這樣當(dāng)寫在前面的字體，在當(dāng)前操作系統(tǒng)中沒有的話，就會(huì)使用后面字體頂替。所以當(dāng)你看一些網(wǎng)頁作品的時(shí)候，會(huì)發(fā)現(xiàn)它的 CSS 中的 font-family 屬性，指定了一大堆的 字體 名稱。但這個(gè)也不是可以隨便指定的，也有一些注意事項(xiàng)。
你應(yīng)該這樣做，先確定你網(wǎng)頁中需要用到的字體，然后確定屬于哪個(gè)字體系列有無其他的相近字體以及衍生字體，然后編寫字體屬性。順序如下：最想用的字體》》可以代替的相近字體》》相近通用字體。例如如下寫法：
font-family： Times， TimesNR， ‘New Century Schoolbook’，Georgia， ‘New York’， serif;
這樣的意思就是，優(yōu)先使用 Times 字體，然后系統(tǒng)沒有的話，查找同型異名的 TimesNR 字體，如果沒有，尋找系統(tǒng)中的相近字體 New Century Schoolbook 等其他字體，最后如果都無法找到，就使用通用字體 serif ，這樣瀏覽器就會(huì)尋找系統(tǒng)中的 無襯線 的默認(rèn)字體，來代替。
字體的大小選擇
形容字體大小的單位
在 CSS 中，最常用的描述字體大小的單位有兩個(gè)：em、px。通常認(rèn)為 em 為相對(duì)大小單位，px 為絕對(duì)大小單位。但從實(shí)際應(yīng)用中來講，px 像素其實(shí)也是一種相對(duì)大小單位。例如，在一塊15寸分辨率為 800×600 像素的屏幕上，10px 大小的文字，要比一塊10寸分辨率 1024×768 像素的屏幕上的 10px 大小的文字顯得更大一些。下面來說一下它們的區(qū)別和用法等。
px：像素單位，10px 表示10個(gè)像素大小，在現(xiàn)在的網(wǎng)頁設(shè)計(jì)中，常被用來表示字體大小。很方便很直觀，但是有一些弊端。對(duì)于可用性不太友好，因?yàn)槭?ldquo;絕對(duì)”單位，所以有些瀏覽器(早期)的字體放大縮小功能失效。瀏覽器的默認(rèn)字體大小為 16px ，早期的網(wǎng)頁，由于屏幕分辨率比較低，通常采用12px作為網(wǎng)頁正文的標(biāo)準(zhǔn)字體大小。但是在現(xiàn)在，感覺有點(diǎn)偏小，比較長的文章來說，瀏覽者看起來費(fèi)勁。現(xiàn)在我更主張使用 14px 作為標(biāo)準(zhǔn)字體，16px 作為中等字體，18px 作為較大字體，12px 作為偏小字體比較合適。
em：相對(duì)大小，它表示的字體大小不固定，根據(jù)基礎(chǔ)字體大小進(jìn)行相對(duì)大小的處理。瀏覽器默認(rèn)的字體大小為 16px，如果你對(duì)一段文字指定 1em，那么表現(xiàn)出來的就是 16px大小，2em 就是 32px 大小。相對(duì)大小單位有很廣泛的用途，由于它的相對(duì)性，所以對(duì)跨平臺(tái)跨設(shè)備的字體大小處理上有得天獨(dú)厚的優(yōu)勢，同時(shí)對(duì)于響應(yīng)式的布局設(shè)計(jì)也有很大的幫助。但是缺點(diǎn)很明顯，你無法直觀的看到大小，而且對(duì)于不同的大小，你需要精確的計(jì)算。
字體實(shí)際表現(xiàn)出來的大小
上面只是說了兩種形容字體大小的單位，但實(shí)際上表現(xiàn)出來的字體大小，并非簡單的單位前面的數(shù)值。除了數(shù)值之外，潛行者m 個(gè)人認(rèn)為還跟 設(shè)備 和 視距 有關(guān)。
設(shè)備就是指顯示設(shè)備的分辨率及屏幕大小，跟前面解釋 px 單位的相對(duì)性相同，如果在一塊非常大的分辨率非常低的屏幕(像廣場電子屏)，即使很小的像素，也會(huì)展示出很大的字。這也就是為什么早期的 800×600 像素橫行的時(shí)候，大家都是用12px大小的原因。因?yàn)轱@示的文字已經(jīng)夠大了。
視距就是指瀏覽者看文字的距離。很明顯的道理，眼睛距離屏幕越遠(yuǎn)，看起來上面的文字就變小了。
所以在選擇網(wǎng)頁中字體大小的時(shí)候，還需要考慮你的用戶的實(shí)際使用習(xí)慣。同一個(gè)網(wǎng)頁，在筆記本上和在手機(jī)上使用的時(shí)候，字體大小就不應(yīng)該相同，因?yàn)殡娔X屏幕大分辨率高，而且視距通常比較近而且固定，手機(jī)等屏幕小分辨率較低，視距更近(大家都喜歡躺著或者趴著玩手機(jī)啦)，所以這些都要考慮，才能得到一個(gè)合理的大小。
為什么是偶數(shù)字體大小
通過上面的單位介紹，對(duì)于 px 單位中，我舉得例子都是 12px、14px、16px、18px等等，為啥不是11px、15px?這涉及到一個(gè)鋸齒的問題，特別是在早期的顯示器中，往往不能很好的處理文字的鋸齒問題，而使用單數(shù)的像素，極有可能造成鋸齒，所以默認(rèn)的通常使用偶數(shù)大小。
字體的顏色選擇
字體的顏色選擇同樣是一個(gè)重要的細(xì)節(jié)，但是涉及到配色了，已經(jīng)超出本文要討論的范圍，所以在這里，我只好簡單的說一下有關(guān)網(wǎng)頁中字體顏色的禁忌。
字體的顏色要樸素、正常
什么叫樸素正常?通常來說，文章都是白底黑字，黑色的。所以網(wǎng)頁中的文字，通常使用黑色，或者淺灰色，這樣更加符合大眾的口味。如果不是一些很有創(chuàng)意的設(shè)計(jì)，請(qǐng)不要隨便的使用顏色。就像 我愛水煮魚 博客里面的一篇文章
如果我為它加上藍(lán)色，你會(huì)怎么想?
顏色要與背景有一定的對(duì)比度
低對(duì)比度，容易導(dǎo)致字體看不清楚。所以要用高對(duì)比度的顏色，例如白底黑字，黑底白字等。不信看下圖：
如果你在看一篇文章，字體的顏色是上圖中，最下面的那個(gè)，你還會(huì)再看下去嗎?
避免特殊顏色
這里要避免的一些特殊顏色，是指網(wǎng)頁中的一些默認(rèn)顏色。特別是藍(lán)色，因?yàn)樗{(lán)色代表著網(wǎng)頁中的超鏈接，如果網(wǎng)頁中有一段藍(lán)色的文字，會(huì)讓人誤以為是可以點(diǎn)擊的超鏈接。所以這種顏色要盡量避免。但是有些時(shí)候在設(shè)計(jì)中，必須要用到這種顏色的設(shè)計(jì)，所以也有一些其他的方法來解決這個(gè)問題。
例如潛行者m博客的 Qetro 主題，采用了藍(lán)色調(diào)，在正文排版布局的時(shí)候思考過關(guān)于加粗文字的樣式。如果使用常規(guī)的粗體黑色來說，較多的加粗內(nèi)容，會(huì)導(dǎo)致頁面文字的混亂。加粗的目的是為了醒目，告訴瀏覽者這是段重要的文字。所以我對(duì)文字添加藍(lán)色處理。但是這個(gè)藍(lán)色恰巧就跟超鏈接的默認(rèn)樣式顏色相同。非常容易讓人迷惑，于是我將超鏈接的樣式帶有默認(rèn)的下劃線。
當(dāng)用戶看到藍(lán)色的時(shí)候，可能會(huì)試圖放在上面看一下，結(jié)果無法點(diǎn)擊也沒有變成手指。再往下拉，看到超鏈接的時(shí)候，一眼就可以看出下劃線是可以點(diǎn)擊的超鏈接。這也是一種還不錯(cuò)的折中方法。
與字體有關(guān)的 CSS 屬性
與字體有關(guān)的 CSS 屬性，通常有以下幾個(gè)：font-family、font-style、font-weight、font-size、line-height、 letter-spacing、word-spacing、text-align、text-decoration。
font-family：用于定義字體，上面有演示不多說。更詳細(xì)的資料請(qǐng)看：font-family。
font-style：用于定義字體的樣式，包括正常、斜體、傾斜等，對(duì)應(yīng)的屬性值為：normal – 文本正常顯示、italic – 文本斜體顯示、oblique – 文本傾斜顯示。
font-weight：用于定義文字的粗細(xì)，詳細(xì)的屬性值請(qǐng)看：font-weight。
font-size：設(shè)置字體大小，不再贅述。
line-height：用于設(shè)置文字中的行間距，合適的行間距對(duì)用戶閱讀帶來良好體驗(yàn)。同時(shí)還可以用于垂直布局單行文字。
letter-spacing：設(shè)置文字之間的字間距，使文字之間的距離增大或者減小。
word-spacing：用于調(diào)整單詞的間距。
text-align：用來對(duì)齊文字，例如左對(duì)齊、右對(duì)齊、居中對(duì)齊等。
text-decoration：用來修飾一段文本，例如添加下劃線等。常對(duì) a 標(biāo)簽使用這個(gè)屬性消除其默認(rèn)的下劃線。
上面是與字體相關(guān)，比較常用的 CSS 屬性，還有其他更加具體的，可以參考網(wǎng)上的資料，推薦 W3school 上面的有關(guān)字體的資料。
使用在線字體
在 CSS3 中，引入了一個(gè)非常強(qiáng)大而且實(shí)用的功能來面對(duì)上面的字體選擇問題。傳統(tǒng)的字體選擇，要你的操作系統(tǒng)中安裝相應(yīng)字體才可以顯示。如果你在網(wǎng)頁作品中，使用了其他的創(chuàng)意字體，那么你需要生成相應(yīng)的文字圖片來替換，否則不會(huì)顯示。CSS3 中的這個(gè)功能，就是 Web Fonts，網(wǎng)頁中可以使用安裝在服務(wù)器端的字體。你可以將選擇好的字體，上傳到服務(wù)器中，然后使用 CSS3 新增的 @font-face 屬性，來調(diào)用服務(wù)器上的字體，然后來渲染網(wǎng)頁。
支持 CSS3 這一功能的瀏覽器，會(huì)首先找到服務(wù)器上的字體，然后下載下來進(jìn)行渲染。這樣就徹底解決了本地操作系統(tǒng)中，沒有對(duì)應(yīng)字體的問題。關(guān)于 @font-face 的具體使用方法，由于比較多，在本文不再贅述，請(qǐng)大家自行百度之：@font-face的使用方法。
既然如此，那么選擇的余地就很大了，只需要有字體文件就可以。于是一些人就開始想，我可不可以提供一個(gè)在線字體的服務(wù)，大家可以直接看到字體的效果，然后獲取代碼引用這個(gè)字體?于是就出現(xiàn)了在線字體，比較有名的有 Google 在線字體。
不要高興的太早了，自定義字體，目前只能應(yīng)用在英文中。為什么呢?你下載個(gè)字體看一下就知道了，通常英文字體只有幾百KB，因?yàn)樗恍枰瑪?shù)字、標(biāo)點(diǎn)、英文字母即可。而中文字體通常十幾M，最小的也要好幾M。因?yàn)闈h字實(shí)在是太多，而且還需要對(duì)每個(gè)漢字進(jìn)行設(shè)計(jì)制作。這樣的話，漢字就沒法應(yīng)用了，因?yàn)槟阋蜷_一個(gè)網(wǎng)頁，還需要先下載個(gè)幾M的漢字字體，在目前國內(nèi)的網(wǎng)速是不現(xiàn)實(shí)的。
文章來源：潛行者m