字体样式
字体样式简介
字体样式属性
| 属性 | 说明 |
|---|---|
| font-family | 字体类型 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体风格 |
| color | 字体颜色 |
字体类型：font-family
语法结构：
font-family:字体1, 字体2, ... , 字体N;
属性说明:
font-family可以指定多种字体。使用多种字体时，将按照从左到右的顺序排列，并且通过英文逗号隔开。如果不定义font-family，浏览器将会采用默认字体类型，即“宋体”
代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-family</title>
<style type="text/css">
#div1{font-family: Arial;}
#div2{font-family: "times new roman";}
#div3{font-family: "微软雅黑";}
</style>
</head>
<body>
<div id="div1">Arial</div>
<div id="div2">Times New Roman</div>
<div id="div3">微软雅黑</div>
</body>
</html>
Arial
Times New Roman
微软雅黑
字体大小：font-size
语法结构：
font-size:像素值
元素说明：
实际上，font-size：属性的属性值有两种，一种是**“关键字”**如：small，medium，large等，另一种就是像素值了，像素值是我们经常用的
字体粗细：font-weight
语法结构：
font-weight:取值
属性说明：
font-weight属性值也是有两种，一种是“100~900的数值”,另一种是“关键字”
font-weight关键字
| 属性值 | 说明 |
|---|---|
| normal | 正常（默认） |
| lighter | 较细 |
| bold | 较粗 |
| bolder | 很粗 |
在一般网页开发中，我们只会用到bold
代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-weight</title>
<style type="text/css">
#p1{font-weight: 100;}
#p2{font-weight: 400;}
#p3{font-weight: 700;}
#p4{font-weight: 900;}
#p5{font-weight: lighter;}
#p6{font-weight: normal;}
#p7{font-weight: bold;}
#p8{font-weight: bolder;}
</style>
</head>
<body>
<p id="p1">莫迪老仙，法力无边</p>
<p id="p2">莫迪老仙，法力无边</p>
<p id="p3">莫迪老仙，法力无边</p>
<p id="p4">莫迪老仙，法力无边</p>
<hr/>
<p id="p5">莫迪老仙，法力无边</p>
<p id="p6">莫迪老仙，法力无边</p>
<p id="p7">莫迪老仙，法力无边</p>
<p id="p8">莫迪老仙，法力无边</p>
</body>
</html>
字体风格
语法结构：
font-style:取值
font-style属性取值：
| 属性值 | 说明 |
|---|---|
| normal | 正常(默认值) |
| italic | 斜体 |
| oblique | 斜体 |
这里提供了两种斜体的属性，为何？
因为对于某些字体，它是没有通过使用italic属性来实现斜体效果的，所以通过oblique来实现斜体效果
字体颜色
语法结构
color:颜色值
属性说明：
color属性值有两种，一种是“关键字”，另一种是“十六进制RGB”
381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
