1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <link rel="stylesheet" type="text/css" href="style.css">
7 <style type="text/css">
8 #p1{font-size: 50px}
9 #p2{font-size: 200%}
10 #p3{font-size: 2em}
11 #p4{font-size: xx-small;}
12 #p5{font-size: x-small;}
13 #p6{font-size: small;}
14 #p7{font-size: medium;}
15 #p8{font-size: large;}
16 #p9{font-size: x-large;}
17 #p10{font-size: xx-large;}
18 #p11{font-size: smaller;}
19 #p12{font-size: larger;}
20 #p13{font-variant: normal; }
21 #p14{font-variant: small-caps; }
22 #p15{font-style: normal;}
23 #p16{font-style: italic;}
24 #p17{font-style: oblique;}
25 #p18{font-weight: normal;}
26 #p19{font-weight: bold;}
27 #p20{font-weight: bolder;}
28 #p21{font-weight: lighter;}
29 #p22{font-weight: 700;}
30 #p23{font-weight: 900;}
31 #p24{font-family: 隶书,楷体}
32 #p25{font: 30px 隶书 }
33 </style><!--font-family可设置多个内容，用逗号隔开，若无第一个则匹配第二个以此类推。-->
34 </head>
35 <body>
36 <div>
37 <p>未设置字体</p>
38 <p id="p1">font-size规定文本的字体尺寸</p>
39 <p id="p2">font-size规定文本的字体尺寸</p>
40 <p id="p3">font-size规定文本的字体尺寸</p>
41 <p id="p4">font-size规定文本的字体尺寸</p>
42 <p id="p5">font-size规定文本的字体尺寸</p>
43 <p id="p6">font-size规定文本的字体尺寸</p>
44 <p id="p7">font-size规定文本的字体尺寸</p>
45 <p id="p8">font-size规定文本的字体尺寸</p>
46 <p id="p9">font-size规定文本的字体尺寸</p>
47 <p id="p10">font-size规定文本的字体尺寸</p>
48 <p id="p11">font-size规定文本的字体尺寸</p>
49 <p id="p12">font-size规定文本的字体尺寸</p>
50 <p id="p13">font-variant规定是否以小型大写字母的字体显示文本,normal默认值，浏览器会显示一个标准字体</p>
51 <p id="p14">font-variant规定是否以小型大写字母的字体显示文本，浏览器会显示小型大写字母的字体</p>
52 <p id="p15">font-style规定文本的字体样式，normal默认值，浏览器会显示一个标准字体</p>
53 <p id="p16">font-style规定文本的字体样式，italic浏览器会显示一个斜体的字体样式，类似i标签的作用</p>
54 <p id="p17">font-style规定文本的字体样式，oblique浏览器会显示一个倾斜的字体样式</p>
55 <p id="p18">font-weight规定字体的粗细，normal默认值，标准粗细。类似b标签的作用</p>
56 <p id="p19">font-weight规定字体的粗细，bold粗体</p>
57 <p id="p20">font-weight规定字体的粗细，bolder更粗</p>
58 <p id="p21">font-weight规定字体的粗细，lighter更细</p>
59 <p id="p22">font-weight规定字体的粗细，100-900,400等同normal，700等同bold</p>
60 <p id="p23">font-weight规定字体的粗细，100-900,400等同normal，700等同bold</p>
61 <p id="p24">font-family规定字体系列，如楷体、隶书等</p>
62 <p id="p25">font可同时设置字体多种属性，至少要设置字体大小font-size(位置倒数第二）和字体系统font-family(位置最后），font-style、font-variant、font-weight放在前面顺序随便。</p>
63 <p id="p26">font-face我的自定义字体</p>
64 </div>
65 </body>
66 </html>
1 @font-face{
2 font-family: "myfont";
3 src:url('fonts/FZMWFont.ttf');
4 }
5 #p26{font-size:40px;font-family: myfont}
