網站設計之字體在頁面排版上的完全攻略

我們每天設計都在與字體打交道。但是我們一直沒有認真在意他們的存在。我們沒有很好地使用過他們，甚至濫用他們。這一切是因為我們不了解他們。字體作為排版的重要元素之一;在設計里也是最深奧的一門學問之一。本文中，就與大家來一起探討一下這門深奧的學問。

字體的類型

英文字體(Typeface)，分為幾種大類，這是在使用英文字體的時候必須知道的基本知識：一、襯線體(Serif)襯線(serif)就是筆畫邊緣的裝飾部分。下圖中紅色標注的地方就是襯線。襯線設計的初衷是為了更清楚地標明筆觸的末端，提高辨識率，提高閱讀速度。另外，使用襯線字體會讓人感覺更加的正統(tǒng)。所以我們常見的英文書籍，特別是論文、小說，很多都是使用襯線體來完成正文的。網頁設計中常用的襯線體有Times New Roman和Georgia。下圖左邊是12px的Times New Roman字體，右邊是12px的Georgia。在中文里，我們使用的宋體就是對應的襯線字體。二、非襯線體/無襯線體(Sans-serif)字體如果不帶襯線的話，那么就稱為非襯線體或者無襯線體。下圖就是非襯線體。網頁設計中常用的非襯線體相對就比較多了。有Arial、Verdana、Tahoma、Helivetica、Calibri等。下圖從左到右依次是Arial、Verdana、Tahoma:值得注意的是，雖然在書籍中，襯線字體被廣泛地應用，但是在互聯網上，襯線字體很少被使用。由于電腦屏幕分辨率與書籍不具可比性，所以正文10～12px的 襯線字體在電腦屏幕上是很難辨認的。下圖是沒有Cleartype時，10px的Verdana和10px的Times New Roman的對比。大家可以發(fā)現，左側的Verdana可以被很好的辨識。右側的Times New Roman辨認相當困難。三、等寬字體(Monospace)等寬字體事實上只針對西文字體。因為英文字母的寬度各不相同。例如i就要比m窄很多。編程時顯示代碼，如果字母不等寬那么排版將很難看。我們在DOS命令行中，可以看到使用的是等寬字體。編程要求的等寬字體有如下要求：1、所有字符等寬;2、簡潔、清晰、規(guī)范的字符形體;3、支持ASCII碼為128以上的擴展字符集;4、空白字符(ASCII: 0×20)與其他字符等寬;5、“1”、“l(fā)”和“i”等三個字符易于區(qū)分;6、“0”、“o”和“O”等三個字符易于區(qū)分;7、雙引號、單引號的前后部分易于區(qū)分，最好是鏡像對稱的;8、清晰的標點符號外形，尤其是大括符、圓括符和方括符。常見的等寬字體有Courier，Courier New四、手寫體(Calligraphy)顧名思義，手寫體就是手寫風格的字體。有時我們也叫它書法字體。中文的書法字體大多都比較生硬。個人更推薦使用日文的書法字體。日文書法字體跟加柔美，更人性。但時使用日文書法字體缺點就是大都都是繁體，另外很多漢字會缺少。五、符號體(Symbol)Windows里最著名的符號體就是Webdings(記得以前還在Windows 95的時候蠻愛用的……)。下面是Webdings字體的幾個：字體的樣式常見的字體的樣式分為：正常Normal、粗體Bold、斜體Italic。簡單來說，粗體就是字體會更加黑，更加“粗”。斜體就是將字軸微微傾斜。他們都是用于在篇幅內強調某段文字上。在說到粗體的時候，我們很容易聯想到CSS里的font-weight(字重)屬性。我們知道font-weight(字重)屬性值除了我們平常使用的 normal，bold外，還有bolder,lighter,100~900等屬性。那么這個100～900的值是什么呢?事實上，100～900并沒 有單位。優(yōu)秀的字體會對不同的字重提供不同的設計。如果字體事先內置了不同等級的粗細程度的設計，那么這幾個數值將分別對應每個等級。例如Zurich字 體，就包含了Zurich Light、Zurich Regular、Zurich Medium、Zurich Bold、Zurich Black、Zurich UltraBlack六個字體。這樣一來，Zurich Light對應的就是100、200、300三個數值，Zurich Regular對應的就是400也就是“正常 normal”，Zurich Medium對應的是500，Zurich Bold也就是“粗體 bold”對應的是600、700，Zurich Black對應800，最后，Zurich UltraBlack對應的是900。對于中文斜體，一般在網絡上是不使用的。因為中文筆畫繁多，使用了斜體將難以辨認。單位我們的Web設計中會用到一些單位：1、點(pt、point)72 points = 1 inch，1英寸是72點。另外，1皮卡(pica)=12 points2、像素(pixel、px)像素就是電腦屏幕上的一個最小的圖像單元，通俗地說就是屏幕上最小的一個點。3、DPI、PPIDPI 全稱是Dots Per Inch，點每英寸，PPI全稱是Pixel Per Inch。他們是解析度(Resolution)的單位。也就是說，1inch的長度上能安排多少個點(像素)。舉個例子，一般的，我們的顯示器大概是 72ppi，也就是1英寸的長度上，有72個點(像素)。dpi/ppi越高，解析度就越高，也就是說，顆粒越小，圖像越細膩。一般來說，照片的解析度在 240dpi～300dpi之間，所以為什么照片看起來，要比屏幕上看起來要細致得多。雜志印刷用133或150dpi，高品質書籍采用350-400dpi，因為大多數印刷精美的書籍印刷時用175到200dpi。所以為什么同樣物理大小的文字，在書上看，要比在屏幕上看要清晰得多。也就是我們前面提到的，英文書籍印刷，為什么可以大膽得使用Sans-serif字體。dpi和ppi之間實質上沒有差別。實在要找出差別，那么唯一的差別也許在于dpi常常用于描述掃描儀和打印機，而ppi常常描述屏幕的分辨率。4、ex、x-height常在CSS中使用。1ex = 小寫字母x的高度。5、em常在CSS中使用。當然，em可不是表示小寫字母m的高度(事實上，小寫字母m一般和小寫字母x的高度是一樣的)。1em = 字體的大小的100%。是一個倍數單位。間距1、行距(Line-height、Leading)說到行距(行間距、Line-height、Leading)，我們必須先要學習一個術語叫做基線(baseline)。還記得我們剛學英語的時候寫字母用 的那個線格簿子嗎?那根最粗的橫線就是我們說的基線。基線就是大部分字母所“坐”在的，字體的下降部之上的直線。大部分字體，大寫字母總是緊貼基線，并在 基線之上。中文的字體和英文的大寫字母情況一樣。下圖紅色的線就是基線。那么，行距就是指兩個相鄰的行之間，基線的距離。行間距的單位常常使用em，也就是根據字體大小來定義行距。在瀏覽器中，默認的行距并沒有一個準則。更具 W3C提供的建議，它認為默認的行距應該在1.0em到1.2em之間。事實上，在設定行距的時候，排版上有個原則，就是行與行之間的空隙一定要大于單詞與單詞之間的空隙， 否則的話，閱讀者在閱讀的時候容易“串行”，造成閱讀困難。充足的行距可以隔開每行文字，使得眼睛容易區(qū)分上一行或下一行。近幾年Web上對于正文的排 版，大多喜歡1.5em的行距，尤其是中文網站。也就是如果使用了12px的字體大小，那么設計師常常喜歡18px的行距。1.5em確實是一個很好的經 驗值。事實上，中文的論文的規(guī)范也是使用1.5em的行距。2、字間距(Letter-spacing、Tracking)字間距是指一組字母之間相互間隔的距離。字間距影響了一行或者一個段落的文字的密度。3、字距調整(Kerning)字距調整是一種因視覺需要而做的技術處理。簡單說，在兩個特定的字符連排的時候，你可以為它們單獨指定與眾不同的字間距。比如當一個大寫A后面跟隨一個小寫 v的時候，兩個字符間就會出現視覺上的更大的間距(實際上字間距是一樣的)，這是普通的字符間距所無法解決的。如果減少它們的間距，那么其他的字母就會連 成一團。這時候就需要字距調整來處理了。下圖就是一個應用了字距調整的例子：段落1、行長(Measure)行長是指一段文字的寬度。如下圖：有兩個易讀性問題與行長有關：行長越長，需要的越大的行距。行距太小，讀者閱讀換行時容易串行。行距太大，讀者閱讀行時會感覺到文字不連續(xù)。正文中，每行40~70個字母為宜。2、對齊(Alignment)段落的對齊基本有四種：左對齊(flush left)、右對齊(flush right)、居中對齊(centered)和兩端對齊(justified)。左對齊是指設置文本內容，調整文字的水平間距，使段落或者文章中的文字沿水平方向向左對齊的一種對齊方式。左對齊使文章左側文字具有整齊的邊緣。同時文字的右邊就會不整齊。所以英文對左對齊也叫做ragged right，意指外形參差不齊的右邊。右對齊也類同。居中對齊是指設置文本內容，調整文字的水平間距，使段落或者文章中的文字沿水平方向向中間集中對齊的一種對齊方式。居中對齊使文章兩側文字整齊地向中間集中，使整個段落或整篇文章都整齊的兩端對齊是指設置文本內容兩端，調整文字/單詞的水平間距，使其均勻分布在左右頁邊距之間。兩端對齊使兩側文字具有整齊的邊緣。使用兩端對齊之后，兩側的對齊線會很明晰，文本塊的“快”的感覺也會很明顯。但是，在英文排版中，當行長很短的時候，使用兩端對齊可能會照成某些行詞間距過長，某些行詞間距過短，這樣參差不齊的詞間距會感覺十分凌亂，就像一件到處都是補丁的衣服。3、易讀性易讀性描述的是排印文本閱讀時的輕松和舒適程度。實際上，平常的設計的最根本的目的也在于此。除上文中敘述的一些原則外，我另外收羅了一些小小的易讀性原則，與大家分享：一份設計上至多使用三種字體的大小。一份設計上至多使用三種字體。要保證一定的對比度，但又不可有過度的對比。陽文(白底黑字)比陰文(黑底白字)要更容易閱讀。在#fff的背景上，使用#333的文字要比#000的文字看起來舒服。要注意文字所在的背景。背景要單一。避免背景噪聲?！吧偌词嵌唷?用最少的元素去傳達最多的信息。

讓你的鏈接看起來像是一個鏈接。

本文由成都網站設計公司創(chuàng)新互聯發(fā)布，轉載請注意文章出處！

文章題目：網站設計之字體在頁面排版上的完全攻略
當前路徑：http://www.muchs.cn/news24/223974.html

網站建設、網絡推廣公司-創(chuàng)新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站設計等

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯