一、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是微软的很多软件使用的一种字体。

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

  1. 我给女朋友讲编程html系列(4) -- html常用简单标签

    今天似乎有点感冒,浑身无力,在操场上躺了半个小时,好了许多.好了,废话不说了,还是写今天的教程吧. 1,html中的换行标签是 br,写法是: <br /> 2,html中有一些特殊的字符 ...

  2. 我给女朋友讲编程html系列(3) --html中的超链接标签-a标签 和 框架frame与框架集frameset

    我们浏览网页的时候,当单击某段文字或图片时,就会打开一个新的网页,这里面就使用了超链接. 就比如下图是一个导航类网页,当你单击某个链接就会打开新的网页. 比如,我拿我的qq空间“金河访谈”举例,新建一 ...

  3. 我给女朋友讲编程html系列(2) --Html标题标签h1

    Html是一门标签语言,因此学习Html最快的方式就是学习使用html标签. html标题标签:h1,h2,h3,h4,h5,h6 标题标签总共有6个,h1,h2,h3,h4,h5,h6,从h1到h6 ...

  4. 我给女朋友讲编程html系列(1) -- Html快速入门

    Html是一门编写网页的语言. 在我学习Html的时候,网上的很多朋友说,直接使用[记事本]编写就行了,最后保存为后缀名为 .html 的文件. 不过,我建议你用[Nodepad++]来编写网页,用这 ...

  5. 我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级

    首先看一下使用Css设置h1标签字体颜色和大小的例子,效果图如下: 新建一个网页test.html,然后复制粘贴下面的内容: <html> <head> <style t ...

  6. 我给女朋友讲编程CSS系列(1) –添加CSS样式的3种方式及样式表的优先权

    如果说,原生态就是美,那么,我们就没有必要穿衣打扮. 网页是什么? 说白了,网页就是一堆[html标签]有序的搭配,让[CSS属性值]整整容,请[Javascript语言]处理一下事件. 一个人的整容 ...

  7. CSS系列：CSS中盒子的浮动与定位

    1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为l ...

  8. CSS系列：CSS文字样式

    1. 设置字体 在CSS中字体通过font-family属性来设置. font-family: Verdana, Arial, Helvetica, sans-serif; 上面的字体设置告诉浏览器首 ...

  9. css系列教程--css文件的创建

    css文件的创建:1.外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.cs ...

随机推荐

  1. HTTPS与SSL(二)

    CA Ca介绍 电子商务认证授权机构(CA, Certificate Authority),也称为电子商务认证中心,是负责发放和管理数字证书的权威机构,并作为电子商务交易中受信任的第三方,承担公钥体系 ...

  2. LeetCode Nim Game （简单nim）

    题意: 有一堆石子,里面有n个石头,每次可以从中取出1~3个,两人轮流取,最后一个石子被谁取走即为赢家.你先取,问最后谁赢? 思路: n%4>0则先手赢,因为每次总是可以给对方留4个石子的倍数, ...

  3. 使用Window Media Player网页播放器

    近段时间在做一个IETM的项目,项目需要使用WebBrower对包含avi的xml进行显示,可avi的显示总是有问题,网上找到这段在html中播放avi的代码,在Win10上表现不错,明天上班用Win ...

  4. TTTAttributedLabel

    TTTAttributedLabel 库地址 https://github.com/TTTAttributedLabel/TTTAttributedLabel #import "ViewCo ...

  5. 碰到一个微软的bug：CWinAppEx::GetString

    在调试公司项目代码的时候,有一个系统设置的功能,里面需要从注册表中去读取数据,因为使用了MFC框架所以,为了简化代码直接使用了CWinAppEx::GetString .CWinAppEx::SetS ...

  6. 【洛谷5358】[SDOI2019] 快速查询（模拟）

    点此看题面 大致题意: 有单点赋值.全局加法.全局乘法.全局赋值.单点求值.全局求和\(6\)种操作.现在给出操作序列,以及\(t\)对正整数\(a_i,b_i\).让你处理\(t*q\)次操作,每次 ...

  7. 【BZOJ4698】[SDOI2008] Sandy的卡片（后缀数组+二分）

    点此看题面 大致题意: 给你\(N\)个序列,若定义两个相同子串为一个子串内所有数加上一个数后能变成另一个串,求所有序列中的最长相同子串的长度. 简单的转化 首先,我们对题目进行一个简单的转化. 要求 ...

  8. python_29_三级菜单2

    menu={'河北':{ '石家庄':{ '平山':{ '县城':{}, '寨北':{}, '苏家庄':{}, }, '灵寿':{}, '鹿泉':{} }, }, '北京':{ '昌平':{ '沙河' ...

  9. python_19_编码解码

    msg="我爱北京天安门" #字符串转成Byte类型 print(msg.encode())#encode 编码 print(msg.encode(encoding="u ...

  10. 关于请求时状态为cancel

    项目中发现有一个问题,在我发送某些请求的时候请求一会状态就变为cancel了,我滴个乖乖,这是咋回事,被取消了,后来经过仔细排查后发现了以下两个问题 1.AJAX和form表单同时使用,(form提交 ...