我们都知道在css中对字体的设置有字号(font-size), 字体(font-family)。对字号我们并不陌生。下面我们来说一下字体。
一、字体font-family
1. 网页中不是所有字体都能用哦,因为这个字体要看用户的电脑里面装没装,比如你设置:
1 font-family: "华文彩云"; |
如果用户电脑里面没有这个字体,那么就会变成宋体。
在网页中,我们只使用:微软雅黑,黑体,宋体,对应的英语为:Arial,Times New Roman。如果页面中需要其他字体,则需要切图。
2. 为了防止用户电脑里面,没有微软雅黑这个字体。就要用英语的逗号,隔开备选字体,
就是说如果用户电脑里面,没有安装微软雅黑字体,那么就是宋体:
1 font-family: "微软雅黑","宋体"; |
备选字体可以有无数个,用逗号隔开。
3. 如果在一个页面中既需要设置英语字体,又需要设置中文字体.
我们要将英语字体,放在最前面,这样所有的中文,就不能匹配英语字体,就自动的变为后面的中文字体:
1 font-family: "Times New Roman","微软雅黑","宋体"; |
4. 所有的中文字体,都有英语别名,我们也要知道:
微软雅黑的英语别名:
1 font-family: "Microsoft YaHei"; |
宋体的英语别名:
1 font-family: "SimSun"; |
我们可以通过一句代码来设置字号,行高和字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体</title>
<style type="text/css">
div{
font:16px/20px "Times New Roman","微软雅黑","宋体";
}
</style>
</head>
<body>
<div>设置有字号(font-size),行高(line-height) 字体(font-family)</div></body>
</html>
运行结果:
font:16px/20px "Times New Roman","微软雅黑","宋体";表示的意思是字号位16px,行高为20px,英文字体为"Times New Roman",如果电脑里有微软雅黑字体,中文字体会自动匹配为微软雅黑,否则为宋体
下面我们来看一下,页面的背景颜色
二、背景颜色(background-color)
css的背景颜色有3中表示方法,分别是英语单词,rgb,十六进制
用这三种方式表示红色:
background-color:red;
background-color: rgb(255,0,0);
background-color: #ff0000;