網(wǎng)頁設(shè)計(jì)中最重要的細(xì)節(jié)之一——字體(5)

通過上面的單位介紹，對(duì)于 px 單位中，我舉得例子都是 12px、14px、16px、18px等等，為啥不是11px、15px？這涉及到一個(gè)鋸齒的問題，特別是在早期的顯示器中，往往不能很好的處理文字的鋸齒問題，而使用單數(shù)的像素，極有可能造成鋸齒，所以默認(rèn)的通常使用偶數(shù)大小。

字體的顏色選擇

字體的顏色選擇同樣是一個(gè)重要的細(xì)節(jié)，但是涉及到配色了，已經(jīng)超出本文要討論的范圍，所以在這里，我只好簡(jiǎn)單的說一下有關(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、fon