05使用CSS设置字体和文本样式

使用CSS设置字体和文本样式：

1.定义字体类型font-family

用法：

font-family:name;

font-family:ncursive|fantasy|monospace|serif|sans-serif

name表示字体名称，可指定多种字体，用空格隔开。按优先顺序排列。如果字体名称包含空格，则应该使用括号（）括起来。

 

font是一个复合属性，所谓复合属性是指该属性能够设置多种字体属性，用法如下：

font:font-style||font-variant||font-weight||font-size||line-height||font-family

font:caption|icon|menu|message-box|small-caption|status-bar

属性值之间以空格分隔。font属性中至少应设置字体大小和字体类型，且必须放在后面，否则无效。前面可以定义字体样式、字体粗细、大小写和行高。

 

习惯上，中文网页字体很多都被定义为宋体类型，对于标题或特殊提示信息，如果需要使用特殊字体，则建议采用图像形式来间接表现。原因是中文类型比较少，通用字体类型更少，字体的表现力较弱，即使存在各种艺术字体，但其应用范围较窄。

英文字体类型比较丰富，通用字体的选择余地大，艺术表现力较强。习惯上，标题都采用无衬线字体，艺术字体或手写体，而网页正文则多使用衬线字体。

 

对于英文或其他西文字体来说，CSS提供了5种通用字体。

（1）serif:衬线字体。

（2）sans-serif:无衬线字体。

（3）cursive:草体。

（4）fantasy:奇异字体。

（5）monospace:等宽字体。

 

字体列表以逗号进行分隔，浏览器会按字体名称的顺序逐一在用户的计算机上进行搜索已经安装的字体，一旦遇到与要求相匹配的字体，就按字体显示网页内容，并停止搜索；如果不匹配就继续搜索，直到找到为止，如果样式表里的所有字体都没有安装的话，浏览器就会用自己默认的字体来替代显示网页的内容。

 

2.定义字体大小font-size

css使用font-size属性来定义字体大小，该属性如下：

font-size:xx-small|xsmall|small|medium|large|x-large|xx-large|smaller|length

其中xx-small(最小)、x-small(较小)、small(小)、medium(正常)、large(大)、x-large(较大)、xx-large(最大)表示绝对字体尺寸，这些特殊值将根据对象字体进行调整。

large（增大）和smaller（减少）这些特殊值能根据父对象中的字体尺寸进行相对增大或者缩小处理，使用成比例的em单位进行计算。

length可以是百分数，或者浮点数字和单位标识符组成的长度值，但不可为负值。其百分比取值是基于父对象中字体的尺寸来计算，与em单位计算方法相同。

 

在网页设计中，常用像素（PX）和百分比（%或em）作为字体大小的单位。

CSS提供了很多单位，它们可以被分为两大类：绝对单位和相对单位。

绝对单位所定义的字体大小事固定的，大小显示效果不会受外界因素影响。例如，in(inch)、cm(centimeter)、mm(millimeter)、pt(point)、pc(pica)。此外，xx-small、x-small、small、medium、large、x-large、xx-large这些关键字也是绝对单位。

相对单位所定义的字体大小一般是不固定的，会根据外界环境而不断发生变化。例如：px、em、ex、%、larger和smaller这两个关键字将以父元素的字体大小为参考进行换算。

 

在网页设计中，网页设计师常用的字体带下单位包括了像素和百分比，那么怎样选择合适的字体大小单位呢？

（1）对于网页宽度固定或者栏目宽度固定的布局，使用像素是正确的选择。

（2）对于页面宽度不固定或者栏目宽度也不固定的页面，使用百分比或em是一个正确的选择。一方面有利于客户端浏览器调整字体大小；另一方面，通过设置字体大小的单位为em或百分比，使字体能够适应版面宽度的变化。

 

３.定义字体颜色color:color;

CSS使用color属性来定义字体颜色，该属性用法如下：color:color;

在CSS中，颜色的设置统一采用RGB格式，即按“红黄蓝”三原色的不同比例组成各种颜色。比如RGB（100%，0%，0%），或者是用十六进制表示为#ff0000，即为红色。

.p1{color:red;}                   /*使用颜色名*/

.p2{color:#693333;}                /*使用十六进制*/

.p3{color:rgb(120,120,120);}         /*使用RGB*/

.p4{color:rgb(0%,100%,50%);}

 

4.定义字体粗细font-weight

CSS使用font-weight属性来定义字体粗细，该属性用法如下。

font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

 

font-weight属性值比较特殊，其中normal关键字表示默认值，即正常的字体，相当于取值为400。bold关键字表示粗体，相当于取值700，或者使用<b>标签定义的字体效果。bolder(较粗)和lighter（较细）相对于normal字体粗细而言。

另外也可以设置值为100,200,300,400,500,600,700,800,900，他们分别表示字体的粗细，是对字体粗细的一种量化方式，值越大就表示越粗，相反就表示越细。

 

对于中文网页设计来说，一般仅用到bold和normal两个属性值即可。

 

5.定义斜体字体font-style

CSS使用font-style属性来定义字体倾斜效果，该属性用法如下。

font-style:normal|italic|oblique

其中normal表示默认值，即正常的字体，italic表示斜体。italic和oblique两个取值只能在英文等西方文字中有效。

 

6.定义下划线、删除线和顶划线text-decoration

CSS使用text-decoration属性来定义字体下划线，删除线和顶划线效果，该属性用法如下。

text-decoration：none||underline||overline||line-though||blink

其中none表示默认值，即无装饰字体，underline表示下划线效果，line-though表示删除线效果，overline表示顶划线效果，blink表示闪烁效果。（blink在IE6中不支持。）

 

如果需要文字不仅有下划线，同时还有顶划线和删除线，这时可以将underline和overline的值同时赋给text-decoration，并用空格分开。

 

7.定义字体大小写font-variant

CSS使用font-variant属性来定义字体大小写效果，该属性用法如下。

font-variant:normal|small-caps

其中，normal表示默认值，即正常的字体，small-caps表示小型的大写字母字体。

注意：font-variant仅支持以英文为代表的西文字体，中文字体没有大小写的效果区分。如果设置了小型大写字体，但是该字体没有找到原始小型小写字体，那么浏览器会模拟一个。例如，可通过使用一个常规字体，将其小写字母替换为缩写过的大写字母。

 

CSS还定义了一个text-transform属性，该属性也能够定义字体大小写效果。不过该属性主要定义单词大小写样式，用法格式如下。

text-transform：none|capitalize|uppercase|lowercase

其中，none表示默认值，无转换发生；capitalize表示将每个单词的第一个字母转化为大写，其余无转化发生；uppercase表示把所有的字母都转化成大写字母；lowercase表示把所有的字母都转化为小写字母。

 

在IE和FF 中会发现：IE浏览器认为只要好似单词，就把首字母转换为大写，而FF浏览器认为只有单词通过空格间隔之后，才能够称为独立意义上的单词，所以几个单词连在一起时就算一个词。

 

8.定义文本对齐text-align

CSS使用text-align属性来定义文本的水平对齐方式，该属性的用法如下。

text-align:left|right|center|justify

该属性取值包括四个：其中left表示默认值，左对齐；right表示右对齐；center表示居中对齐；justify表示两端对齐。

 

text-align是块级属性，只能用于<div><p><ul><h1><h6>等标识符中。文本水平对齐不仅可以控制文本的水平对齐，而且可以控制其他块级元素的水平对齐。

在CSS中，让元素居中的方法通常是使用margin属性，将元素的margin-left和margin-right属性设置为auto。在实际应用中，我们可以将其父级元素的text-align属性设置为center。（IE6以下版本必须这样）需要特别注意的是，必须要为居中的元素指定宽度和高度。

 

9.定义垂直对齐vertical-align

CSS中使用vertical-align属性来定义文本的垂直对齐方式，该属性的用法如下：

vertical-align：auto|baseline|sub|super|top|text-top|middle|bottom|lengh

其中，auto属性值将根据layout-flow属性的值对齐对象内容；baseline表示默认值，表示将支持valign特性的对象内容与基线对齐；sub表示垂直对齐文本的下标；super表示对齐文本的上标；top表示将支持valign特性的对象内容与对象顶端对齐；text-top将支持valign特性的对象文本与对象顶端对齐；middle表示将支持valign特性的对象内容与对象中部对齐；text-bottom将支持valign特性的对象文本与对象顶端对齐；length表示由浮点数字和单位标识符组成的长度值或者百分比，可为负数，定义由基线算起的偏移量，基线对于数值来说为0，对于百分数来说就是0%。

 

vertical-align属性不支持块级元素对齐，只有当块级元素显示为单元格时才有效。

 

10.定义字间距和行间距 letter-spacing和word-spacing

CSS使用letter-spacing属性定义子间距，使用word-spacing属性定义词间距，这两个属性的取值都是长度值，由浮点数字和单位标识符组成，既可以是绝对数值又可以是相对数值，默认值为normal，表示默认间隔。

定义词间距时，以空格为基准进行调节，如果多个单词被连在一起，则被word-spacing视为一个单词，则分隔的多个汉字就被视为不同的单词，word-spacing属性此时有效。

对于中文用户来说，letter-spacing属性有效，而word-spacing属性无效。

 

11.定义行间距line-height

行间距，是段落文本行之间的距离。CSS使用line-height属性定义行高，该属性的用法如下。

line-height：normal|length

其中，normal表示默认值。一般为1.2em，length表示百分比数字，或者由浮点数字和单位标识符组成的长度值，允许为负值。

 

行间距取值单位一般为em或者百分比，很少使用像素，也不建议使用。

当line-height属性取值小于一个字大小时，就会发生上下行文本重叠的现象。

 

一般行间距的最佳设置范围为1.2~1.8em，当然，可以根据需要特殊处理。根据的原则：字体越大，行间距越小。

例如：若段落字体大小为12px，则行间距设置为1.8em比较合适；如果字体大小为14px,则行间距为1.5~1.6em比较合适；如果段落字体大小为16~18px,则行间距设置为1.2em比较合适。一般浏览器默认行间距为1.2em左右。例如，IE浏览器默认为19px,（默认字体大小为16px）即1.18em,而FF浏览器默认为1.12em。

 

12.定义缩进text-indent

在CSS中使用text-indent属性定义首行缩进，该属性的用法如下。

text-indent：length

length表示百分比数字或者由浮点数字和单位标识符组成的长度值，允许为负值。建议在设置缩进单位时，以em为设置单位，它表示一个字距，这样比较精确确定首行缩进效果。

例如：text-indent：2em;

 

使用text-indent属性可以设计悬垂缩进效果。

 

text-indent属性可以去负值，定义左侧补白，防止去负缩进导致首行文本伸到段落的边界外边。