Head First HTML与CSS

第八章 增加字体和颜色样式

CSS——掌控页面的表现

调整字体大小

指定字体大小的方法有很多，通常是指定font-size。

1.按像素指定字体大小。

用像素指定字体大小时，就是在告诉浏览器字母高度是多少个像素。在CSS中，指定像素数时，要先指定一个数，后面加“px”。如下：

body{

        font-size:14px;

}

设置一个字体的高度为14像素，这代表字母的最低部分与最高部分之间有14像素。

注意：px必须紧跟在像素数后面，中间不能有空格。

2.用%指定相对大小

用像素指定字体大小时，会明确指出字体有多大。而用一个百分数指定大小时，会相对另一个字体大小指出这个字体有多大。由于font-size是从父元素继承的一个属性，指定一个百分数字体大小时，就是相对于父元素的字体大小。

body{

font-size:14px;

}

h1{

font-size:150%;

}

body为h1的父元素，这里指定的一级标题字体大小为14px的150%也就是21px。

3.使用em指定字体相对大小

类似于百分数，em也是一个相对度量单位。1.3em就相当于130%。

body{

font-size:14px;

}

h1{

font-size:150%;

}

h2{

font-size:1.2em;

}

这里h2的父元素为body，因此二级标题的字体大小为1.2乘以14像素，约为17px（实际上是16.8px，不过大多数浏览器都会默认四舍五入为17px）。

4.使用关键字指定字体大小

可以把一个字体大小指定为xx-small,x-small,small,medium,large,x-large,xx-large。

浏览器会把这些关键字转换为像素值，它会使用浏览器中定义的默认值来完成转换。

通常规则是，small通常定义为大约12像素，每个大小大约比前一个大20%。

body{

font-size:small;

}

5.推荐使用的指定字体大小的方法

第一步，选择一个关键字（推荐small或medium），指定它为body规则中的字体大小，这相当于页面的默认字体大小。

第二步，使用em或百分数，相对于body字体大小指定其他元素的字体大小。

好处：便于改变整个页面的字体大小，需要时，只需改变body的字体大小就可以了，页面上所有字体都会同步调整大小。

注意：不建议使用像素指定字体大小，一是可用性较差，老版本IE浏览器不支持，二是调整大小不方便，页面维护更困难。

6.补充几点

如果没有指定字体大小，浏览器会应用默认字体大小。大多数情况下body的默认字体大小为16像素，h1是默认体文本字体大小的200%，h2是150%，h3是120%，h4是100%，h5是90%，h6是60%。

也可以设置body字体大小为相对大小（如1.1em，120%），这时将会是默认字体大小的相对值。

改变字体粗细

font-weight允许控制文本的粗细。

粗体文本：

font-weight:bold;

正常文本（即默认粗细）：

font-weight:normal;

还有两个相对font-weight属性：bolder和lighter。

使用这两个属性时，会使得文本样式相对于所继承的值稍粗或稍细一点。

h2{

font-weight:bold;

}

为字体增加风格——斜体

在CSS中可以使用font-style属性为文本增加斜体风格：

font-style:italic;

并不是所有字体都支持斜体风格（italic），这时我们得到的实际上称为倾斜（oblique）文本。倾斜文本也是倾斜的，不过这种字体并非是使用一组专门设计的倾斜字符，而是由浏览器将正常文字倾斜。

也可以使用font-style属性得到倾斜文本，如下：

font-style:oblique;

取决于我们选择的字体和浏览器，有时这两种风格看起来是一样的，有时则不同。

---

今天考完了微生物，夺命三连还剩两门，爽喔！

放假倒计时6天。