• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
13!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="utf-8">
6    <title>Font families</title>
7    <style>
8        h2 {
9            color: green;
10        }
11
12        #p1 {
13            font-family: Times, "Times New Roman", serif;
14        }
15
16        #p2 {
17            font-family: Helvetica, Arial, sans-serif;
18        }
19
20        #p3 {
21            font-family: serif;
22        }
23
24        #p4 {
25            font-family: sans-serif;
26        }
27
28        #p5 {
29            font-family: monospace;
30        }
31
32        #p6 {
33            font-family: cursive;
34        }
35
36        #p7 {
37            font-family: fantasy;
38        }
39
40        .s1 {
41            font-style: italic;
42        }
43
44        .s2 {
45            font-style: oblique;
46        }
47
48        .s3 {
49            font-weight: bold;
50        }
51
52        .s4 {
53            font-weight: 100;
54        }
55    </style>
56</head>
57
58<body>
59<p id="mes">此处显示默认字体大小</p>
60<button onclick="getSize()">获取默认字体大小</button>
61
62<p id="mess">此处显示等宽字体大小</p>
63<button onclick="getValue()">获取等宽字体大小</button>
64<script type="text/javascript">
65        var html = document.getElementById("mes")
66        var htm = document.getElementById("mess")
67        var num = 0
68        var text1 = ''
69
70        function getSize() {
71            var m = document.getElementById("p1")
72            html.innerHTML = window.getComputedStyle(m).fontSize
73            text1 = html.innerHTML.slice(0, -2);
74            num = parseFloat(text1);
75            return num;
76        }
77
78        function getValue() {
79            var n = document.getElementById("p5")
80            htm.innerHTML = window.getComputedStyle(n).fontSize
81        }
82        function getget() {
83            return document.getElementById("mess").innerHTML
84        }
85        function getgetSize() {
86            return document.getElementById("mes").innerHTML
87        }
88    </script>
89<h1>Font Families</h1>
90<p>Used with CSS. Two common font combination lists and the five generic fallback font families.</p>
91
92<h2>font-family: Times, "Times New Roman", serif</h2>
93
94<p id="p1" style="font-size:8px;">
95    Behold! A serif font family list!
96    <span class="s1">It swooshes with an italic font-style!</span>
97    <span class="s2">It leans with an oblique font-style!</span>
98    <span class="s3">It puffs out with a bold font-weight!</span>
99    <span class="s4">It sucks in with a 100 font-weight!</span>
100</p>
101
102<h2>font-family: Helvetica, Arial, sans-serif</h2>
103<p id="p2">
104    Behold! A sans-serif font family list!
105    <span class="s1">It swooshes with an italic font-style!</span>
106    <span class="s2">It leans with an oblique font-style!</span>
107    <span class="s3">It puffs out with a bold font-weight!</span>
108    <span class="s4">It sucks in with a 100 font-weight!</span>
109</p>
110
111<h2>font-family: serif</h2>
112<p id="p3">
113    Behold! The serif generic font family!
114    <span class="s1">It swooshes with an italic font-style!</span>
115    <span class="s2">It leans with an oblique font-style!</span>
116    <span class="s3">It puffs out with a bold font-weight!</span>
117    <span class="s4">It sucks in with a 100 font-weight!</span>
118</p>
119
120<h2>font-family: sans-serif</h2>
121<p id="p4">
122    Behold! The sans-serif generic font family!
123    <span class="s1">It swooshes with an italic font-style!</span>
124    <span class="s2">It leans with an oblique font-style!</span>
125    <span class="s3">It puffs out with a bold font-weight!</span>
126    <span class="s4">It sucks in with a 100 font-weight!</span>
127</p>
128
129<h2>font-family: monospace</h2>
130<p id="p5" style="font-size:14px;">
131    Behold! The monospace generic font family!
132    <span class="s1">It swooshes with an italic font-style!</span>
133    <span class="s2">It leans with an oblique font-style!</span>
134    <span class="s3">It puffs out with a bold font-weight!</span>
135    <span class="s4">It sucks in with a 100 font-weight!</span>
136</p>
137
138<h2>font-family: cursive</h2>
139<p id="p6">
140    Behold! The cursive font family!
141    <span class="s1">It swooshes with an italic font-style!</span>
142    <span class="s2">It leans with an oblique font-style!</span>
143    <span class="s3">It puffs out with a bold font-weight!</span>
144    <span class="s4">It sucks in with a 100 font-weight!</span>
145</p>
146
147<h2>font-family: fantasy</h2>
148<p id="p7">
149    Behold! The fantasy generic font family!
150    <span class="s1">It swooshes with an italic font-style!</span>
151    <span class="s2">It leans with an oblique font-style!</span>
152    <span class="s3">It puffs out with a bold font-weight!</span>
153    <span class="s4">It sucks in with a 100 font-weight!</span>
154</p>
155
156<!-- Link back to HTML Dog: -->
157<p><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
158</body>
159