-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfont-examples.html
149 lines (132 loc) · 3.15 KB
/
font-examples.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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<meta
name="description"
content="Font Showcase for PDF Creation"
/>
<title>Font Showcase for PDF</title>
<style>
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 1cm;
font-size: 12px;
line-height: 1.5;
background-color: #ffffff;
color: #000000;
}
h1,
h2,
h3,
p {
margin-bottom: 0.5rem;
}
.container {
max-width: 21cm;
margin: auto;
}
section {
margin-bottom: 2cm;
padding: 1cm;
border: 1px solid #ddd;
border-radius: 8px;
}
section h2 {
margin-bottom: 0.5rem;
}
.georgia {
font-family: "Georgia", serif;
}
.garamond {
font-family: "Garamond", serif;
}
.baskerville {
font-family: "Baskerville", serif;
}
.helvetica {
font-family: "Helvetica", sans-serif;
}
.calibri {
font-family: "Calibri", sans-serif;
}
.roboto-slab {
font-family: "Roboto Slab", serif;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1 class="text-center">Font Showcase for PDF Creation</h1>
<p>
Explore six different fonts optimized for readability and professional
appearance in PDFs.
</p>
</header>
<!-- Georgia -->
<section class="georgia">
<h2>1. Georgia (Serif)</h2>
<p>
Georgia is a modern serif font designed for excellent readability both
on screens and in print. It features soft, rounded characters and a
timeless style.
</p>
</section>
<!-- Garamond -->
<section class="garamond">
<h2>2. Garamond (Serif)</h2>
<p>
Garamond is an elegant serif font widely used in printed materials.
Its lightweight and classic look make it a great choice for books,
articles, and formal documents.
</p>
</section>
<!-- Baskerville -->
<section class="baskerville">
<h2>3. Baskerville (Serif)</h2>
<p>
Baskerville is a refined serif font with high contrast between thick
and thin strokes. It’s often used in luxury print materials, such as
magazines and brochures.
</p>
</section>
<!-- Helvetica -->
<section class="helvetica">
<h2>4. Helvetica (Sans-Serif)</h2>
<p>
Helvetica is a versatile sans-serif font known for its clean, modern
design. It's a popular choice for corporate documents and professional
presentations.
</p>
</section>
<!-- Calibri -->
<section class="calibri">
<h2>5. Calibri (Sans-Serif)</h2>
<p>
Calibri is a sans-serif font designed for digital use but prints
beautifully. Its smooth curves and balanced spacing make it an
excellent choice for reports and resumes.
</p>
</section>
<!-- Roboto Slab -->
<section class="roboto-slab">
<h2>6. Roboto Slab (Serif)</h2>
<p>
Roboto Slab is a modern slab-serif font with a clean, technical look.
It’s great for contemporary designs and structured documents like
technical guides or reports.
</p>
</section>
</div>
</body>
</html>