我给女友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色，如何使用火狐浏览器的Firebug插件查看网页的字体

时间 2019-11-17

标签编程 css 系列如何设置字体类型大小颜色使用火狐浏览器 firebug 插件查看网页栏目悠闲生活繁體版

原文原文链接

1、CSS如何设置字体的类型、大小、颜色css

设计网页时，通常设置body的字体，让其余标签继承body的字体，这样设置特别方便，可是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的，它们的字体须要单独设置。html

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，设置字体的类型网站

字体的类型经过下面这段代码设置：spa

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进制的颜色值来表示。

2、如何使用火狐浏览器的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是微软的不少软件使用的一种字体。