<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS之字体篇</title>
<style type="text/css">
h3{text-align: center; color: #3300ff;}
hr{color: #660066;}
#p1{font-size: 20px; font-style: normal; font-family: 宋体;}
/* 出现两个字体的时候，优先使用第一个字体。但如果第一种字体电脑中不存在，会自动使用第二种字体。 */
#p2{font-size: 200%; font-style: italic; font-family: 楷体,隶书;}
/* oblique为歪斜体，italic为斜体 */
#p3{font-size: x-small; font-style: oblique; font-family: 楷体,宋体,楷体;}
#p4{font-size: xx-large; font-style: oblique; font-family: 黑体,隶书,楷体_gb2312;}
</style>
</head>
<body>
<h3>设置字体大小、样式、及字体名称</h3>
<hr>
<p id="p1">字号大小为20px、字体正常、宋体</p>
<p id="p2">字号大小为200%、字体为斜体、隶书</p>
<p id="p3">字号大小为x-small、字体为歪斜体、隶书</p>
<p id="p4">字号大小为xx-large、字体歪斜体、黑体</p>
</body>
</html>
