讓文字在網頁中展現風采

摘 要：文字有史以來就一直是信息的重要載體，即使先進網絡發達如斯，文字的重要性仍然不減。從來沒有可以脫離文字，使用其他方式就能完整無誤地表達的信息。既然文字如此重要，作為網站的設計者又怎么能夠對網頁中的文本隨意設置呢？文本需要在網頁中發揮它的重要所用，網頁更需要通過設置得體的文本來更有效地傳遞它自身的信息。

關鍵詞：文字 文本的設置 CSS

網絡的用途之一在于信息的傳遞，在信息交流方式越來越多元化的今天，網頁仍然扮演著重要的角色。盡管圖片、影視和音樂在網頁中的比例越來越大，對于信息的傳遞作用也十分重要，但是信息在網頁中的展示仍然以文字為主。文字的特性決定了設計者的思路。

一、 字的特性

網頁中的文字因使用語言的不同而有其特殊性。本文主要以中文和英文為例進行說明。字或者字母，存在字體、顏色、字號以及斜體、粗體、大寫化等特性。

1、字體

設計者可以在設計網頁時使用任何字體，但是用戶卻未必能夠欣賞到優美的文字畫面。因為瀏覽器只能顯示它所裝載的字體，可以使用備用字體來解決問題，盡管效果會打折扣。列舉一下會使用到的通用字體族。

serif：serif（襯線）字體，在字母比劃的結尾處有明顯的襯線，類似于細小的“足”。這種字體引導讀者的視線從一個字輕松地轉移到下一個，使閱讀變得輕松、順暢。

sans serif：sans serif（無襯線）字體，相對于serif字體而言，沒有襯線裝飾。看起來干凈簡潔，適用于標題。

monospace：monospace（等寬）字體，適用于顯示計算機代碼，它的每個字母都是等寬的。

2、顏色

常用的顏色系統是十六進制符號。一個顏色的值，例如：#0066FF，用了3組十六進制數：“00”、“66”和“FF”。它們分別指定了紅、綠和藍的濃度，不同的濃度值呈現不的色彩。設置顏色時，需要注意的是：①文字的顏色與整個網頁的風格要統一；②重點字或鏈接要使用特殊的顏色，以示區別。

3、字號

針對網頁中的不同的元素，在使用文字進行表述時，會給予不同的字號。字號的設置單位有：pixel、Keyword、Percentage和Em。究竟使用哪種方式設置是設計者要考慮的問題。

pixel（像素）：像素值的設置很好理解，它們的特點是不受任何瀏覽器的影響。所以pixel是設計者鐘愛的一種設置方式，它的單位是px。

Keyword（關鍵字）：CSS提供了7種關鍵字：xx-small、x-small、small、medium、large、x-large和xx-large。基本上，xx-small相當于9px。這么說的前提是以瀏覽器的基準字號為標準，但是各個瀏覽器都有細微的差別，所以，這種設置會與設計者的目標有所偏差。

Percentage（百分比）：使用這種設置方式需要知道的是，將CSS的percentage設置成100%，相當于16px。

Em（行長單位）：它的使用方式與percentage相同。

4、特殊化

和字號的設置目的相同，希望網頁中的某些特殊詞語或句子，被瀏覽者所重視。特殊化的方式有：斜體、粗體、大寫化和修飾線。

斜體化和粗體化：Web瀏覽器通常將和標簽里的內容顯示為斜體；將表格標題及標題標簽里面的文本顯示為粗體。[1]

大寫化：如果讓每個標簽都變成大寫的字母，而又不想一個個使用CapsLock鍵，可以求助于CSS的text-transform屬性，它可以將文本全部變成大寫、小寫或者每個單詞的首字母大寫。

修飾線：使用text-decoration屬性的四個值，underline、overline、lint-through或者blink，以及它們的各種組合（同時使用兩個或三個關鍵字）可以讓文字變得醒目。

5、字母間距和字間距

做好間距的設置可以讓網頁中的內容看起來更有層次感。

二、 文本的特性

做好了對字的設置后，必須對整段的文本進行設置。這種設置的重要性不必冗述了。那么有哪些地方需要做設置呢？

1、行間距

CSS利用line-height屬性對行間距進行設置，默認的值為120%。當然，行間距的設定可以使用pixel、em或percetage三種方式，究竟使用哪種視設計者的習慣而定。

2、首行及邊距

在談及這個話題之前，需要做的是知道如何去對齊文本。通常使用text-align： left/right/justify/center來讓文本對齊。對其文本之后，需要考慮的就是如何進行首行縮進并去除邊距了。

設計者可以使用pixel和em值來設定首行的縮進量，例如：

text-indent： 25px；

或者text-indent： 5em；

段落之間的距離通常是整體文本能否給人舒適視覺效果的關鍵。消除或者增加段落的邊距，使用margin語句：

margin-top/bottom/left/right： XXpx；

綜上所述，按照步驟把關鍵的屬性（字的或者詞的）進行了設置，網頁中的文本會變得整潔并展現讓人舒適的視覺效果。但是，如果想要網站中的文本在有舒適的視覺效果的同時，看起來相當有特色和引人注目，就需要對文本進行更為細致和深入地設置了。

參考文獻：

[1]David Sawyer McFarland. 《CSS實戰手冊》[M].北京：電子工業出版社，2010：88-105

[2]Dave Shea 等.《CSS3禪意花園》[M].北京：人民郵電出版社，2013： 157-165

作者簡介：張一馳（1978.10-），男，漢族，內蒙古赤峰市人，助教，內蒙古交通職業技術學院，主要從事計算機網絡建設方面的研究。