-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (108 loc) · 4.9 KB
/
index.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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>字体库</title>
</head>
<body>
<main>
<p>欢迎来到 Project Trans 的字体库</p>
<label>
选择字体
<select id="select"></select>
</label>
<label>
选择字重 <span id="fontWeight">400</span>
<input
id="fontWeightSelector"
type="range"
min="100"
max="900"
step="100"
value="400"
/>
</label>
<p>The quick brown fox jumps over the lazy dog.</p>
<article style="text-indent: 2em">
<header>
<h1>雪</h1>
<address>
<a
rel="author noopener noreferrer"
target="_blank"
href="https://zh.wikipedia.org/wiki/%E9%B2%81%E8%BF%85"
>鲁迅</a
>
</address>
</header>
<p>
暖国的雨，向来没有变过冰冷的坚硬的灿烂的雪花。博识的人们觉得他单调，他自己也以为不幸否耶？江南的雪，可是滋润美艳之至了；那是还在隐约着的青春的消息，是极壮健的处子的皮肤。雪野中有血红的宝珠山茶，白中隐青的单瓣梅花，深黄的磬口的蜡梅花，雪下面还有冷绿的杂草。胡蝶确乎没有；蜜蜂是否来采山茶花和梅花的蜜；我可记不真切了。但我的眼前仿佛看见冬花开在雪野中，有许多蜜蜂们忙碌地飞着，也听得他们嗡嗡地闹着。
</p>
<p>
孩子们呵着冻得通红，像紫芽姜一般的小手，七八个一齐来塑雪罗汉。因为不成功，谁的父亲也来帮忙了。罗汉就塑得比孩子们高得多，虽然不过是上小下大的一堆，终于分不清是壶卢还是罗汉，然而很洁白，很明艳，以自身的滋润相黏结，整个地闪闪地生光。孩子们用龙眼核给他做眼珠，又从谁的母亲的脂粉奁中偸得胭脂来涂在嘴唇上。这回确是一个大阿罗汉了。他也就目光灼灼地嘴唇通红地坐在雪地里。
</p>
<p>
第二天还有几个孩子来访问他；对了他拍手，点头，嘻笑。但他终于独自坐着了。晴天又来消释他的皮肤，寒夜又使他结一层冰，化作不透明的水晶模样，连续的晴天又使他成为不知道算什么，而嘴上的胭脂也褪尽了。
</p>
<p>
但是，朔方的雪花在纷飞之后，却永远如粉，如沙，他们决不黏连，撒在屋上，地上，枯草上，就是这样。屋上的雪是早已就有消化了的，因为屋里居人的火的温热。别的，在晴天之下，旋风忽来，便蓬勃地奋飞，在日光中灿灿地生光，如包藏火焰的大雾，旋转而且升腾，弥漫太空，使太空旋转而且升腾地闪烁。
</p>
<p>在无边的旷野上，在凛冽的天宇下，闪闪地旋转升腾着的是雨的精魂……</p>
<p>是的，那是孤独的雪，是死掉的雨，是雨的精魂。</p>
</article>
</main>
<div id="linkContainer"></div>
<script async>
(async () => {
const fonts = await fetch("/path_map.json").then((res) => res.json());
const select = document.getElementById("select");
const fontWeightSelector =
document.getElementById("fontWeightSelector");
const linkContainer = document.getElementById("linkContainer");
const options = [`<option value="">请选择</option>`]
.concat(
Object.keys(fonts).map(
(name) => `<option value="${name}">${name}</option>`
)
)
.join("\n");
select.innerHTML = options;
select.addEventListener("change", () => {
if (!select.value) {
linkContainer.innerHTML = "";
return document.documentElement.style.removeProperty(
"--font-family"
);
}
document.documentElement.style.setProperty(
"--font-family",
fonts[select.value].fontFamily
);
const links = fonts[select.value].paths
.map(
(link) => `<link rel="stylesheet" href="/${link}/result.css" />`
)
.join("\n");
linkContainer.innerHTML = links;
});
fontWeightSelector.addEventListener("input", () => {
document.getElementById("fontWeight").textContent =
fontWeightSelector.value;
document.documentElement.style.setProperty(
"--font-weight",
fontWeightSelector.value
);
});
})();
</script>
<style>
main {
margin: auto;
max-width: 1080px;
font-family: var(--font-family, sans-serif);
font-weight: var(--font-weight, 400);
}
</style>
</body>
</html>