让文字在网页中展现风采

摘 要：文字有史以来就一直是信息的重要载体，即使先进网络发达如斯，文字的重要性仍然不减。从来没有可以脱离文字，使用其他方式就能完整无误地表达的信息。既然文字如此重要，作为网站的设计者又怎么能够对网页中的文本随意设置呢？文本需要在网页中发挥它的重要所用，网页更需要通过设置得体的文本来更有效地传递它自身的信息。

关键词：文字 文本的设置 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-），男，汉族，内蒙古赤峰市人，助教，内蒙古交通职业技术学院，主要从事计算机网络建设方面的研究。