首页 > 代码库 > 我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色，如何使用火狐浏览器的Firebug插件查看网页的字体
我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色，如何使用火狐浏览器的Firebug插件查看网页的字体
一、CSS如何设置字体的类型、大小、颜色
设计网页时，一般设置body的字体，让其他标签继承body的字体，这样设置特别方便，但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的，它们的字体需要单独设置。
1， 新建一个网页a.html，把下面的代码复制进去。
<html><head><style type="text/css">body {font-family : 微软雅黑,宋体; font-size : 1em;color : #f00;}</style></head><body ><h1>设置字体的类型、大小、颜色</h1><p> CSS设置字体的类型、大小、颜色</p></body></html>2， 使用浏览器打开网页a.html，可以查看到效果图如下：
3， 设置字体的类型
字体的类型通过下面这段代码设置：
font-family : 微软雅黑,宋体, ‘New York‘;
font-family翻译为中文是“字体家族”，就是告诉浏览器，优先使用哪一种字体，谁排在最前面，就先使用这种字体，这里是“微软雅黑”；
多种字体使用逗号间隔，字体名中带有空格或#、$的，需要加单引号或双引号。
如果操作系统中“微软雅黑”，XP系统中就没有这种字体，那么就会使用“宋体”，如果没有“宋体”，就会再使用系统中默认的字体，不过操作系统中一般都是有“宋体”的，而且，如果没有给网页设置字体类型，网页就会按照操作系统中默认的字体来显示。
4，设置字体的大小
字体大小通过下面这段代码设置：
font-size : 1em;
font-size 翻译为中文是“字体尺寸”，它的单位一般是px(像素)或em(字体高度)。
中国的许多网站的默认字体是12px，而且很多人使用的是IE浏览器，像IE6，用户是不能改变网页字体大小的，而现在主流的浏览器，只需要按住Ctrl后，滚动滑轮就可以放大缩小网页了。
单位em是一种相对的字体高度，一般的浏览器都默认为16px，需要注意的是，em会继承父元素的字体大小。
比如设置body字体大小为1em，p的字体大小为0.8em，那么换算为像素，p标签的实际单位是 1 * 0.8 * 16px = 12.8px。
不过，为了简化em和px的换算，一般设置body的font-size为62.5%，然后使用em设置其他标签的字体大小，这样，em换算为px只需要乘以10就行了，比如1em = 1 * 62.5% * 16px = 10 px
很多人都推荐使用em作为网页字体单位，有2点好处，不过我的实践告诉我，似乎并不太重要。
(1)当对IE6设置了字体更大或更小后，所有字体都可以按照比例放大缩小。不过，使用IE6的人越来越少了，现在主流的浏览器，按住Ctrl，滑动滑轮，就可以放大缩小了。
(2) 通过修改body的大小，就能按比例修改所有字体大小，因为body是其他字体的基准。这个一般是先设置body大小，然后设置其他标签大小，此时，若是修改了body的大小，其他标签的大小就会跟着变了。
5， 设置字体颜色
设置字体的颜色通过下面的代码：
color : #f00;
color是颜色的意思，color用来设置一个标签的前景色，表现出来也就是元素文本的颜色。
它的值，一般都是使用#加16进制的颜色值来表示。
二、如何使用火狐浏览器的Firebug插件查看网页的字体？
火狐浏览器有很多插件，其中插件Firebug对网页调试、程序开发有很重要的作用，下面讲一下如何使用Firebug查看网页中使用的字体。
1， 下载火狐浏览器。
在百度搜索框中输入“火狐浏览器”，一般，排在第一个的就是最新版的软件，如下图，选择“普通下载”，下载完成后，安装即可。
2， 打开“附加组件”窗口。
安装完火狐浏览器后，在浏览器关闭按钮(叉号)下方，是一个按钮“打开菜单”，单击一下，选择“附加组件”，然后就会打开一个新的窗口。
3， 搜索firebug
在右上角的搜索框中输入“firebug”，单击搜索。找到搜出来的Firebug，单击安装。安装完成后把浏览器关闭，重新打开。
4， 使用firebug
打开火狐浏览器后，按一下键盘上的F12，你会发现原来的页面被分为了上下两部分，下面那部分就是firebug的工作窗口。
使用firebug一定要记住快捷键，F12，按一下，firebug会弹出来；再按一下，它会消失。
单击【查看器】，单击【计算后】，然后可以看出百度首页使用的字体为font-family: arial;
5， font-family: arial;的说明
CSS设置字体的类型通过font-family属性来设置，一般设置为“宋体，微软雅黑”等等字体，arial是微软的很多软件使用的一种字体。