讓文字在網(wǎng)頁中展現(xiàn)風(fēng)采

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

關(guān)鍵詞：文字 文本的設(shè)置 CSS

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

一、 字的特性

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

1、字體

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

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

sans serif：sans serif（無襯線）字體，相對于serif字體而言，沒有襯線裝飾?？雌饋砀蓛艉啙?，適用于標題。

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

2、顏色

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

3、字號

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

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

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

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

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

4、特殊化

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

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

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

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

5、字母間距和字間距

做好間距的設(shè)置可以讓網(wǎng)頁中的內(nèi)容看起來更有層次感。

二、 文本的特性

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

1、行間距

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

2、首行及邊距

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

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

text-indent： 25px；

或者text-indent： 5em；

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

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

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

參考文獻：

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

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

作者簡介：張一馳（1978.10-），男，漢族，內(nèi)蒙古赤峰市人，助教，內(nèi)蒙古交通職業(yè)技術(shù)學(xué)院，主要從事計算機網(wǎng)絡(luò)建設(shè)方面的研究。