-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathmandarin-fonts.html
More file actions
130 lines (118 loc) · 5.76 KB
/
Copy pathmandarin-fonts.html
File metadata and controls
130 lines (118 loc) · 5.76 KB
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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>mandarin fonts — zesameri</title>
<meta name="robots" content="noindex">
<link rel="shortcut icon" href="./assets/images/icon.png" type="image/png">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&family=Noto+Serif+SC:wght@400;700&family=ZCOOL+XiaoWei&family=ZCOOL+QingKe+HuangYou&family=ZCOOL+KuaiLe&family=Ma+Shan+Zheng&family=Zhi+Mang+Xing&family=Long+Cang&family=Liu+Jian+Mao+Cao&display=swap" rel="stylesheet">
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2em 2em 4em;
background: #111;
color: #f5f5f5;
font-family: "Roboto Slab", serif;
}
h1 {
font-size: 1.2em;
font-weight: normal;
letter-spacing: 1px;
}
h1 a { color: inherit; }
.font-sample {
border-top: 1px solid #333;
padding: 1.5em 0 2em;
}
.font-name {
font-size: 0.8em;
color: #888;
margin-bottom: 1em;
letter-spacing: 1px;
}
.sample-bio {
font-size: 2em;
line-height: 1.5;
margin: 0 0 0.5em;
}
.sample-ui {
font-size: 1em;
color: #bbb;
margin: 0;
word-spacing: 0.5em;
}
.f-pingfang { font-family: -apple-system, "PingFang SC", sans-serif; }
.f-songti { font-family: "Songti SC", serif; }
.f-noto-sans { font-family: "Noto Sans SC", sans-serif; }
.f-noto-serif{ font-family: "Noto Serif SC", serif; }
.f-xiaowei { font-family: "ZCOOL XiaoWei", serif; }
.f-qingke { font-family: "ZCOOL QingKe HuangYou", sans-serif; }
.f-kuaile { font-family: "ZCOOL KuaiLe", sans-serif; }
.f-mashan { font-family: "Ma Shan Zheng", cursive; }
.f-zhimang { font-family: "Zhi Mang Xing", cursive; }
.f-longcang { font-family: "Long Cang", cursive; }
.f-liujian { font-family: "Liu Jian Mao Cao", cursive; }
</style>
</head>
<body>
<h1><a href="./zh/">mandarin font samples</a></h1>
<div class="font-sample f-pingfang">
<div class="font-name">PingFang SC — system default (macOS/iOS)</div>
<p class="sample-bio">把我的一部分，说给深渊听。<br>慢慢吃。<br>永远在变化。</p>
<p class="sample-ui">首页 · 文字 · 艺术 · 垃圾 · 代码 · 色彩网格 · 爱你的，花</p>
</div>
<div class="font-sample f-songti">
<div class="font-name">Songti SC — system serif (macOS/iOS)</div>
<p class="sample-bio">把我的一部分，说给深渊听。<br>慢慢吃。<br>永远在变化。</p>
<p class="sample-ui">首页 · 文字 · 艺术 · 垃圾 · 代码 · 色彩网格 · 爱你的，花</p>
</div>
<div class="font-sample f-noto-sans">
<div class="font-name">Noto Sans SC — google fonts sans</div>
<p class="sample-bio">把我的一部分，说给深渊听。<br>慢慢吃。<br>永远在变化。</p>
<p class="sample-ui">首页 · 文字 · 艺术 · 垃圾 · 代码 · 色彩网格 · 爱你的，花</p>
</div>
<div class="font-sample f-noto-serif">
<div class="font-name">Noto Serif SC — google fonts serif</div>
<p class="sample-bio">把我的一部分，说给深渊听。<br>慢慢吃。<br>永远在变化。</p>
<p class="sample-ui">首页 · 文字 · 艺术 · 垃圾 · 代码 · 色彩网格 · 爱你的，花</p>
</div>
<div class="font-sample f-xiaowei">
<div class="font-name">ZCOOL XiaoWei — slender serif display</div>
<p class="sample-bio">把我的一部分，说给深渊听。<br>慢慢吃。<br>永远在变化。</p>
<p class="sample-ui">首页 · 文字 · 艺术 · 垃圾 · 代码 · 色彩网格 · 爱你的，花</p>
</div>
<div class="font-sample f-qingke">
<div class="font-name">ZCOOL QingKe HuangYou — bold poster display</div>
<p class="sample-bio">把我的一部分，说给深渊听。<br>慢慢吃。<br>永远在变化。</p>
<p class="sample-ui">首页 · 文字 · 艺术 · 垃圾 · 代码 · 色彩网格 · 爱你的，花</p>
</div>
<div class="font-sample f-kuaile">
<div class="font-name">ZCOOL KuaiLe — playful rounded</div>
<p class="sample-bio">把我的一部分，说给深渊听。<br>慢慢吃。<br>永远在变化。</p>
<p class="sample-ui">首页 · 文字 · 艺术 · 垃圾 · 代码 · 色彩网格 · 爱你的，花</p>
</div>
<div class="font-sample f-mashan">
<div class="font-name">Ma Shan Zheng — brush calligraphy</div>
<p class="sample-bio">把我的一部分，说给深渊听。<br>慢慢吃。<br>永远在变化。</p>
<p class="sample-ui">首页 · 文字 · 艺术 · 垃圾 · 代码 · 色彩网格 · 爱你的，花</p>
</div>
<div class="font-sample f-zhimang">
<div class="font-name">Zhi Mang Xing — handwriting</div>
<p class="sample-bio">把我的一部分，说给深渊听。<br>慢慢吃。<br>永远在变化。</p>
<p class="sample-ui">首页 · 文字 · 艺术 · 垃圾 · 代码 · 色彩网格 · 爱你的，花</p>
</div>
<div class="font-sample f-longcang">
<div class="font-name">Long Cang — handwriting</div>
<p class="sample-bio">把我的一部分，说给深渊听。<br>慢慢吃。<br>永远在变化。</p>
<p class="sample-ui">首页 · 文字 · 艺术 · 垃圾 · 代码 · 色彩网格 · 爱你的，花</p>
</div>
<div class="font-sample f-liujian">
<div class="font-name">Liu Jian Mao Cao — cursive calligraphy</div>
<p class="sample-bio">把我的一部分，说给深渊听。<br>慢慢吃。<br>永远在变化。</p>
<p class="sample-ui">首页 · 文字 · 艺术 · 垃圾 · 代码 · 色彩网格 · 爱你的，花</p>
</div>
</body>
</html>