在 CSS 中關於字型處理效果的思考

字型的處理在網頁設計中無論怎麼強調也不為過，畢竟網頁使用來傳遞資訊的，而最經典最直接的資訊傳遞方式就是文字，所以，了解一點字型的基本知識對於設計來說還是非常重要的。

中文和英文的最大區別就是中文是方塊字，英文是拼音文字，這對字型的處理的影響是巨大的。看看下面的圖示就會發現，英文本型裡的那些變化在中文字型裡都弱化了。

作為中文的讀者，習慣性的接受方塊形狀做為閱讀的單元，其實對於眼睛來說，這是一種容易疲勞的方式，閱讀的時候你的視線實際上是跟隨整行文字的外形。看看這個例子。

now i've tried to talk to you and make you understand

哪一行更容易讀呢？

我個人以為比較重要的幾個原則是(適用於英文的情形):

字型的選用要考慮該文字的用途，是做標題呢，還是段落文字？通常來說 san serif 字型適合作為標題使用，例如 arial；serif 字型適合作為段落文字使用，例如time new roman。對於網頁設計來說，有幾個字型是我強烈推薦的，verdana, tahoma, georgia。事實上，像 verdana 這個字型是由世界上頂級的字型設計師花了差不多兩年時間設計出來的，microsoft負責買單，然後免費提供給使用者，這個字型是ie安裝的一部分，如果你安裝了ie 4以上的版本，你的電腦裡就一定有這個字型，所以你不必擔心使用者是否有這個字型。它的設計考慮了字型在螢幕上顯示的可能面對的問題，而且提供了近乎完美的答案。唯一的麻煩是它的近乎完美造成了我們使用的時候沒有了個性，因為每個人都使用它。

字型大小的大小？論壇裡很多討論，關於pixle 好還是point好？我就不重複了，在這裡我想提出的是字型大小的大小在css裡，有很多不同的單位，大致上有三類，

可能要多說幾句的是 em 和 ex，em 在 css 裡代表就是字型字型大小的大小，例如對於12 pt的字型來說, 1 em 就等於12 pt 範例：

p 也許你會說我可以用text-indent: 10pt來實現同樣的效果啊，但那只是在理想的情形下，如果使用者覺得他的瀏覽器設定字型大小為14pt更好的時候，你所設計的比例就失去了，所以相對尺寸對於網頁的可伸縮性設計是非常有利的。

ex 和 em 類似，但不盡相同，回到上面的圖示，x-height 對於每一種字型來說是不同的，ex 是根據字型的 x-height 來定義字型的大小。

對齊方式？最好使用左對齊，尤其要避免使用左右對齊，除非你有乙個特殊的設計目的，左對齊時右側的不對齊正是為了閱讀的方便，右側的變化對你的視力是乙個幫助，它借助變化告訴你的眼睛可以換行了。

行間距？行間距取決於字型的大小，一般來說，小的字型大小需要大一點的行間距來便於閱讀，中文字型在網頁上如果沒有行間距的設定，對於閱讀大段文字來說是讀者的災難，所以適當設定line-height是非常必要的。一般地， line-height 在網頁設計中應該是字型大小的1.5倍到2倍。word 和其它的文字編輯軟體裡，一般設定字型的120%作為預設的行間距。css裡的 line- height 設定，是均分後加在每一行的上下，也就是說，如果 line-height 設定為 20px 的話，那麼每一行文字的上下各有10px的間距。

字間距和字元間距？很特殊的用途，對中文來說這兩者應該是相同的。這個設定的本身就是為了解決某些字型設計上缺陷，來增加文字的可讀性。

本文**:http://www.blueidea.com/tech/web/2003/10.asp

在 CSS 中關於字型處理效果的思考

CSS中關於字型樣式p標籤的屬性

css中的字型屬性

css中的陰影效果

在 CSS 中關於字型處理效果的思考

CSS中關於字型樣式p標籤的屬性

css中的字型屬性

css中的陰影效果

相關推薦