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

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

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

一、 字的特性

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

1、字體

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

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

sans serif：sans serif（無襯線）字體，相對(duì)于serif字體而言，沒有襯線裝飾?？雌饋砀蓛艉啙崳m用于標(biāo)題。

monospace：monospace（等寬）字體，適用于顯示計(jì)算機(jī)代碼，它的每個(gè)字母都是等寬的。

2、顏色

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

3、字號(hào)

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

pixel（像素）：像素值的設(shè)置很好理解，它們的特點(diǎn)是不受任何瀏覽器的影響。所以pixel是設(shè)計(jì)者鐘愛的一種設(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。這么說的前提是以瀏覽器的基準(zhǔn)字號(hào)為標(biāo)準(zhǔn)，但是各個(gè)瀏覽器都有細(xì)微的差別，所以，這種設(shè)置會(huì)與設(shè)計(jì)者的目標(biāo)有所偏差。

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

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

4、特殊化

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

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

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

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

5、字母間距和字間距

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

二、 文本的特性

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

1、行間距

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

2、首行及邊距

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

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

text-indent： 25px；

或者text-indent： 5em；

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

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

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

參考文獻(xiàn)：

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

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

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