-
Notifications
You must be signed in to change notification settings - Fork 0
/
fonts.html
108 lines (86 loc) · 2.55 KB
/
fonts.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body.p {font-size:100%;}
h1.fs {font-size:40px;}
h1.p {font-size:2.5em;}
h1.em {font-size:2.5em;}
h2.fs {font-size:30px;}
h2.p {font-size:1.875em;}
h2.em {font-size:1.875em;}
p.em {font-size:0.875em;}
p.p {font-size:0.875em;}
p.fs {font=size:14px;}
p.serif {font-family:"Times New Roman", Times, serif;}
p.sansserif {font-family:Arial, Helvetica, sans-serif;}
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
<title>CSS Fonts</title>
</head>
<body>
<h1>CSS Fonts</h1>
<h4>CSS Font Families</h4>
<p>There are two types of font familiy names</p>
<ul>
<li>generic family
<ul>
<li>
a group of font families with a similar look (like "Serif" or "Monospace")
</li>
</ul>
</li>
<li>
font family
<ul>
<li>
a specific font family(like "Times New Roman" or "Arial")
</li>
</ul>
</li>
</ul>
<table border="1">
<tr>
<td>Generic family</td>
<td>Font family</td>
<td>Description</td>
</tr>
<tr>
<td>Serif</td>
<td>Times New Roman Georgia</td>
<td>Serif fonts have small lines at the ends on some characters</td>
</tr>
<tr>
<td>Sans-serif</td>
<td>Arial Verdana</td>
<td>"Sans" means without - these fonts do not have the lines at the ends of characters</td>
</tr>
<tr>
<td>Monospace</td>
<td>Courier New Lucida Console</td>
<td>All monospace characters have the same width</td>
</tr>
</table>
<h4>Setting the Font Family</h4>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
<h4>Setting the Font Style</h4>
<p class="normal">The text is shown normally</p>
<p class="italic">The text is shown in italics</p>
<p class="oblique">The text is "leaning" (oblique is very similar to italic, but less supported)</p>
<h4>Set Font Size With Pixels</h4>
<h1 class="fs">This is heading 1</h1>
<h2 class="fs">This is heading 2</h2>
<p class="fs">This is a paragraph.</p>
<h4>Set Font Size With Em</h4>
<h1 class="em">This is heading 1</h1>
<h2 class="em">This is heading 2</h2>
<p class="em">This is a paragraph.</p>
<h4>Use percent to set font size</h4>
<h1 class="p">This is heading 1</h1>
<h2 class="p">This is heading 2</h2>
<p class="p">This is a paragraph.</p>
</body>
</html>