font
今天上午复习了编译原理还有概率论就到中午了，吃完饭继续学习CSS，看看几天可以学完基础。加油
| 属性 | 说明 |
|---|---|
| font-family | 字体类型 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体风格 |
| color | 字体颜色 |
1、font-family
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS font Style</title>
<style type="text/css">
#f1{font-family: Arial, Helvetica, sans-serif;}
#f2{font-family: "Times New Roman";}
#f3{font-family: "微软雅黑";}
</style>
</head>
<body>
<div id="f1">font 1</div>
<div id="f2">font 2</div>
<div id="f3">font 3</div>
</body>
</html>显示效果：
说明：
这一行#f1{font-family: Arial, Helvetica, sans-serif;}代码表示f1部分优先使用Arial字体，如果电脑中没有安装该字体，则使用后面的，以此类推，如果都没有安装的话，默认显示宋体。
2、font-size
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS font Style</title>
<style type="text/css">
#f1{font-family: Arial, Helvetica, sans-serif; font-size: 3em;}
#f2{font-family: "Times New Roman"; font-size:xx-small;}
#f3{font-family: "微软雅黑";font-size: 80%;}
#f4{font-family: "楷体";font-size: 32px;}
</style>
</head>
<body>
<div id="f1">字体font 1</div>
<div id="f2">字体font 2</div>
<div id="f3">字体font 3</div>
<div id="f4">字体font 4</div>
</body>
</html>显示效果：
px是pixel（像素），默认大小是16px，
em = 希望得到的像素大小 / 父元素字体像素大小（这里就相当于16*3px=48px）
%是相对于原来字体大小的百分比
3、font-weight
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS font Style</title>
<style type="text/css">
#f1{font-family: Arial, Helvetica, sans-serif; font-size: 3em;font-weight:700;}
#f2{font-family: "Times New Roman"; font-size:xx-small;font-weight: bold;}
#f3{font-family: "微软雅黑";font-size: 100%;font-weight: 900;}
#f4{font-family: "楷体";font-size: 32px; font-weight: 500;}
/* h1{font-size: 250%;} */
</style>
</head>
<body>
<h1>最大的标题</h1>
<div id="f1">字体font 1</div>
<div id="f2">字体font 2</div>
<div id="f3">字体font 3</div>
<div id="f4">字体font 4</div>
</body>
</html>显示效果：
一般我们使用bold就够了。
4、font-style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS font Style</title>
<style type="text/css">
#f1{font-family: Arial, Helvetica, sans-serif; font-size: 3em;font-weight:700;}
#f2{font-family: "Times New Roman"; font-size:xx-small;font-weight: bold;}
#f3{font-family: "微软雅黑";font-size: 32px;font-weight: 900;font-style: oblique;}
#f4{font-family: "楷体";font-size: 32px; font-weight: 500;font-style: italic;}
/* h1{font-size: 250%;} */
</style>
</head>
<body>
<h1>最大的标题</h1>
<div id="f1">字体font 1</div>
<div id="f2">字体font 2</div>
<div id="f3">字体font 3</div>
<div id="f4">字体font 4</div>
</body>
</html>显示效果：
设置斜体是italic，但是有些字体没有这个属性，这个时候就要用oblique来实现斜体。
5、color
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS font Style</title>
<style type="text/css">
#f1{color: pink;}
#f2{color:blueviolet}
#f3{color: #03FCA1;}
</style>
</head>
<body>
<h1>最大的标题</h1>
<div id="f1">字体font 1</div>
<div id="f2">字体font 2</div>
<div id="f3">字体font 3</div>
<div id="f4">字体font 4</div>
</body>
</html>显示效果：
说明：
这个#03FCA1是16进制RGB的方法，可以让颜色变化更加细致，其中#000000是黑色，#FFFFFF是白色。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。