-
Notifications
You must be signed in to change notification settings - Fork 23
/
demo.html
98 lines (87 loc) · 2.53 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
<!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");
}
.si-yuan {
font-family: "思源黑体";
}
.a-li {
font-family: "阿里黑体";
}
.oppo {
font-family: "OPPO黑体";
}
.lxgw {
font-family: "落霞孤鹜";
}
.mi-sans {
font-family: "MiSans";
}
</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>
</body>
</html>