/
test.html
104 lines (104 loc) · 2.5 KB
/
test.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Bit Font Make Test</title>
<style>
.size {
margin: 40px;
display: flex;
}
.guide {
display: flex;
flex-direction: column;
width: 550px;
margin-right: -550px;
padding: 0px 0;
}
.guide .em {
display: flex;
background-color: cyan;
}
.size.big .guide .em {
height: 60px;
}
.size.small .guide .em {
height: 6px;
}
.guide .gap {
display: flex;
height: 10px;
}
.size.big .guide .gap {
height: 10px;
}
.size.small .guide .gap {
height: 1px;
}
.guide .gap.top {
background-color: magenta;
}
.guide .gap.bottom {
background-color: mediumpurple;
}
.test {
margin: 0;
}
.test.py {
font-family: 'Bit Font Make TestPy';
}
.test.png {
font-family: 'Bit Font Make TestPNG';
}
.test.gif {
font-family: 'Bit Font Make TestGIF';
}
.size.big .test {
font-size: 60px;
width: 150px;
}
.size.big .test.py {
padding-left: 10px;
}
.size.small .test {
font-size: 6px;
width: 15px;
}
.size.small .test.py {
padding-left: 1px;
}
.test .box {
background-color: yellow;
}
</style>
</head>
<body>
<div class="size big">
<div class="guide">
<div class="gap top"></div>
<div class="em"></div>
<div class="gap bottom"></div>
<div class="gap top"></div>
<div class="em"></div>
<div class="gap bottom"></div>
</div>
<p class="test py">A<span class="box">A</span> AA<span class="box">A</span></p>
<p class="test png">B<span class="box">C</span> BC<span class="box">B</span></p>
<p class="test gif">D<span class="box">E</span> DE<span class="box">D</span></p>
</div>
<div class="size small">
<div class="guide">
<div class="gap top"></div>
<div class="em"></div>
<div class="gap bottom"></div>
<div class="gap top"></div>
<div class="em"></div>
<div class="gap bottom"></div>
</div>
<p class="test py">A<span class="box">A</span> AA<span class="box">A</span></p>
<p class="test png">B<span class="box">C</span> BC<span class="box">B</span></p>
<p class="test gif">D<span class="box">E</span> DE<span class="box">D</span></p>
</div>
</body>
</html>