-
Notifications
You must be signed in to change notification settings - Fork 23
/
Copy pathdemo.html
131 lines (115 loc) · 3.43 KB
/
demo.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
<!DOCTYPE html>
<html lang="zh">
<head>
<title>免费黑体</title>
<style>
@font-face {
font-family: "思源黑体";
src: url("./dist/SourceHanSansCN-Medium.ttf");
}
@font-face {
font-family: "阿里黑体";
src: url("./dist/Alibaba-PuHuiTi-Medium.ttf");
}
@font-face {
font-family: "OPPO黑体";
src: url("./dist/OPPOSans-M.ttf");
}
@font-face {
font-family: "落霞孤鹜";
src: url("./dist/LXGWWenKai-Regular.ttf");
}
@font-face {
font-family: "MiSans";
src: url("./dist/MiSans-Regular.ttf");
}
@font-face {
font-family: "Sarasa";
src: url("./dist/Sarasa-Gothic-SC-Regular.ttf");
}
@font-face {
font-family: "旁门正道";
src: url("./dist/PangMenZhengDao-Regular.ttf");
}
.si-yuan {
font-family: "思源黑体";
}
.a-li {
font-family: "阿里黑体";
}
.oppo {
font-family: "OPPO黑体";
}
.lxgw {
font-family: "落霞孤鹜";
}
.mi-sans {
font-family: "MiSans";
}
.sarasa {
font-family: "Sarasa";
}
.pangmen {
font-family: "旁门正道";
}
</style>
</head>
<body>
<h2>默认字体</h2>
<div>
<div>这是默认字体</div>
<div>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div>1234567890-=！@#￥%……&*()~:"{}[]|\?/<>,.;'+</div>
<div>空格:--- ---</div>
</div>
<h2>思源黑体</h2>
<div class="si-yuan">
<div>这是思源黑体</div>
<div>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div>1234567890-=!@#￥%……&*()~:"{}[]|\?/<>,.;'+</div>
<div>空格:--- ---</div>
</div>
<h2>阿里黑体</h2>
<div class="a-li">
<div>这是阿里黑体</div>
<div>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div>1234567890-=!@#￥%……&*()~:"{}[]|\?/<>,.;'+</div>
<div>空格:--- ---</div>
</div>
<h2>OPPO黑体</h2>
<div class="oppo">
<div>这是OPPO黑体</div>
<div>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div>1234567890-=!@#￥%……&*()~:"{}[]|\?/<>,.;'+</div>
<div>空格:--- ---</div>
</div>
<h2>落霞孤鹜楷体</h2>
<div class="lxgw">
<div>这是落霞孤鹜楷体</div>
<div>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div>1234567890-=!@#￥%……&*()~:"{}[]|\?/<>,.;'+</div>
<div>空格:--- ---</div>
</div>
<h2>小米字体</h2>
<div class="mi-sans">
<div>这是小米 Sans 字体</div>
<div>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div>1234567890-=!@#￥%……&*()~:"{}[]|\?/<>,.;'+</div>
<div>空格:--- ---</div>
</div>
<h2>更沙字体</h2>
<div class="sarasa">
<div>这是更沙 Regular 字体</div>
<div>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div>1234567890-=!@#￥%……&*()~:"{}[]|\?/<>,.;'+</div>
<div>空格:--- ---</div>
</div>
<h2>旁门正道字体</h2>
<div class="pangmen">
<div>这是旁门正道 Regular 字体</div>
<div>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<div>1234567890-=!@#￥%……&*()~:"{}[]|\?/<>,.;'+</div>
<div>空格:--- ---</div>
</div>
</body>
</html>