forked from zenozeng/fonts.css
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
95 lines (91 loc) · 13.5 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
<!doctype HTML>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="fonts.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body class="font-hei-regular">
<style>#forkongithub a{background:#000;color:#fff;text-decoration:none;font-family:arial, sans-serif;text-align:center;font-weight:bold;padding:5px 40px;font-size:1rem;line-height:2rem;position:relative;transition:0.5s;}#forkongithub a:hover{background:#555;color:#fff;}#forkongithub a::before,#forkongithub a::after{content:"";width:100%;display:block;position:absolute;top:1px;left:0;height:1px;background:#fff;}#forkongithub a::after{bottom:1px;top:auto;}@media screen and (min-width:800px){#forkongithub{position:absolute;display:block;top:0;right:0;width:200px;overflow:hidden;height:200px;}#forkongithub a{width:200px;position:absolute;top:60px;right:-60px;transform:rotate(45deg);-webkit-transform:rotate(45deg);box-shadow:0 0 8px rgba(0,0,0,0.8);}}</style><span id="forkongithub"><a href="https://github.com/zenozeng/fonts.css">Fork me on GitHub</a></span> <header>Fonts.css -- 跨平台中文字体解决方案</header>
<div id='notes'> Note: 下滑线标注的为本地存在的字体,关于测试字体的方法,可以看我<a href='https://github.com/zenozeng/font-detect.js'>这个 Repo</a> </div> <article>
<div class="collection">
<div class="tags"><li>Windows</li><li>Mac</li><li>Linux</li></div>
<h2 class="font-hei-regular">黑体</h2>
<div class="text font-hei">
<ul>
<li class="size24">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size18">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size16">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size14">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size12">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
</ul>
</div>
<div class="class">.font-hei</div>
<div class="css"><span data-fonts='Helvetica Neue' data-name='Helvetica Neue'><a href='#' onclick='return false;' title='Mac'>Helvetica Neue</a></span>,<span data-fonts='Helvetica' data-name='Helvetica'><a href='#' onclick='return false;' title='Windows,Mac'>Helvetica</a></span>,<span data-fonts='Nimbus Sans L' data-name='Nimbus Sans L'><a href='#' onclick='return false;' title='Linux'>Nimbus Sans L</a></span>,<span data-fonts='Arial' data-name='Arial'><a href='#' onclick='return false;' title='Windows'>Arial</a></span>,<span data-fonts='Liberation Sans' data-name='Liberation Sans'><a href='#' onclick='return false;' title='Linux'>Liberation Sans</a></span>,<span data-fonts='PingFang SC' data-name='PingFang'><a href='#' onclick='return false;' title='Mac'>PingFang</a></span>,<span data-fonts='Hiragino Sans GB' data-name='冬青黑'><a href='#' onclick='return false;' title='Mac'>冬青黑</a></span>,<span data-fonts='Source Han Sans CN,Source Han Sans SC' data-name='思源黑体'><a href='#' onclick='return false;' title='Adobe'>思源黑体</a></span>,<span data-fonts='Microsoft YaHei' data-name='微软雅黑'><a href='#' onclick='return false;' title='Windows'>微软雅黑</a></span>,<span data-fonts='Wenquanyi Micro Hei' data-name='文泉驿微米黑'><a href='#' onclick='return false;' title='Linux'>文泉驿微米黑</a></span>,<span data-fonts='WenQuanYi Zen Hei' data-name='文泉驿正黑'><a href='#' onclick='return false;' title='Linux'>文泉驿正黑</a></span>,<span data-fonts='ST Heiti' data-name='华文黑体'><a href='#' onclick='return false;' title='Mac'>华文黑体</a></span>,<span data-fonts='SimHei' data-name='中易黑体'><a href='#' onclick='return false;' title='Windows'>中易黑体</a></span>,<span data-fonts='WenQuanYi Zen Hei Sharp' data-name='文泉驿点阵正黑'><a href='#' onclick='return false;' title='Linux'>文泉驿点阵正黑</a></span></div>
<div class="css">font-family: "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;</div>
<div class="notes"><li>某些 Linux 中 Helvetica 会自动 fallback 到 Nimbus Sans L (具体见 /etc/fonts/conf.d/30-metric-aliases.conf, debian jessie/sid )</li><li>某些 Linux 中 Arial 会自动 fallback 到 Liberation Sans (具体见 /etc/fonts/conf.d/30-metric-aliases.conf, debian jessie/sid )</li></div> </div>
<div class="collection">
<div class="tags"><li>Windows</li><li>Mac</li><li>Linux</li></div>
<h2 class="font-hei-regular">楷体</h2>
<div class="text font-kai">
<ul>
<li class="size24">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size18">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size16">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size14">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size12">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
</ul>
</div>
<div class="class">.font-kai</div>
<div class="css"><span data-fonts='Baskerville' data-name='Baskerville'><a href='#' onclick='return false;' title='Mac'>Baskerville</a></span>,<span data-fonts='Georgia' data-name='Georgia'><a href='#' onclick='return false;' title='Windows,Mac'>Georgia</a></span>,<span data-fonts='Liberation Serif' data-name='Liberation Serif'><a href='#' onclick='return false;' title='Linux'>Liberation Serif</a></span>,<span data-fonts='Kaiti SC' data-name='Kaiti SC'><a href='#' onclick='return false;' title='Mac'>Kaiti SC</a></span>,<span data-fonts='STKaiti' data-name='华文楷体'><a href='#' onclick='return false;' title='Windows[MS Office],Mac'>华文楷体</a></span>,<span data-fonts='AR PL UKai CN,AR PL UKai HK,AR PL UKai TW,AR PL UKai TW MBE' data-name='AR PL UKai'><a href='#' onclick='return false;' title='Linux'>AR PL UKai</a></span>,<span data-fonts='AR PL KaitiM GB' data-name='文鼎PL简中楷'><a href='#' onclick='return false;' title='AR PL'>文鼎PL简中楷</a></span>,<span data-fonts='KaiTi,KaiTi_GB2312' data-name='楷体'><a href='#' onclick='return false;' title='Windows'>楷体</a></span>,<span data-fonts='TW\-Kai' data-name='全字库正楷体'><a href='#' onclick='return false;' title='全字库'>全字库正楷体</a></span></div>
<div class="css">font-family: Baskerville, Georgia, "Liberation Serif", "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, "TW\-Kai", serif;</div>
</div>
<div class="collection">
<div class="tags"><li>Windows</li><li>Mac</li><li>Linux</li></div>
<h2 class="font-hei-regular">宋体</h2>
<div class="text font-song">
<ul>
<li class="size24">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size18">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size16">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size14">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size12">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
</ul>
</div>
<div class="class">.font-song</div>
<div class="css"><span data-fonts='Georgia' data-name='Georgia'><a href='#' onclick='return false;' title='Windows,Mac'>Georgia</a></span>,<span data-fonts='Nimbus Roman No9 L' data-name='Nimbus Roman No9'><a href='#' onclick='return false;' title='Linux'>Nimbus Roman No9</a></span>,<span data-fonts='Songti SC' data-name='Songti SC'><a href='#' onclick='return false;' title='Mac'>Songti SC</a></span>,<span data-fonts='STSong' data-name='华文宋体'><a href='#' onclick='return false;' title='Windows[MS Office],Mac'>华文宋体</a></span>,<span data-fonts='AR PL New Sung' data-name='AR PL New Sung'><a href='#' onclick='return false;' title='Linux'>AR PL New Sung</a></span>,<span data-fonts='AR PL SungtiL GB' data-name='文鼎PL简报宋'><a href='#' onclick='return false;' title='AR PL'>文鼎PL简报宋</a></span>,<span data-fonts='NSimSun' data-name='新宋体'><a href='#' onclick='return false;' title='Windows'>新宋体</a></span>,<span data-fonts='SimSun' data-name='中易宋体'><a href='#' onclick='return false;' title='Windows'>中易宋体</a></span>,<span data-fonts='TW\-Sung' data-name='全字库正宋体'><a href='#' onclick='return false;' title='全字库'>全字库正宋体</a></span>,<span data-fonts='WenQuanYi Bitmap Song' data-name='文泉驿点阵宋'><a href='#' onclick='return false;' title='Linux'>文泉驿点阵宋</a></span>,<span data-fonts='AR PL UMing CN,AR PL UMing HK,AR PL UMing TW,AR PL UMing TW MBE' data-name='AR PL UMing'><a href='#' onclick='return false;' title='Linux'>AR PL UMing</a></span></div>
<div class="css">font-family: Georgia, "Nimbus Roman No9 L", "Songti SC", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", serif;</div>
<div class="notes"><li>在 Linux 下可能遇到前几种字体都没有安装的情况,在极端情况下暂时先用 AR PL UMing 代替</li></div> </div>
<div class="collection">
<div class="tags"><li>Windows</li><li>Mac</li></div>
<h2 class="font-hei-regular">仿宋</h2>
<div class="text font-fang-song">
<ul>
<li class="size24">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size18">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size16">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size14">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size12">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
</ul>
</div>
<div class="class">.font-fang-song</div>
<div class="css"><span data-fonts='Baskerville' data-name='Baskerville'><a href='#' onclick='return false;' title='Mac'>Baskerville</a></span>,<span data-fonts='Times New Roman' data-name='Times New Roman'><a href='#' onclick='return false;' title='Windows'>Times New Roman</a></span>,<span data-fonts='Liberation Serif' data-name='Liberation Serif'><a href='#' onclick='return false;' title='Linux'>Liberation Serif</a></span>,<span data-fonts='STFangsong' data-name='华文仿宋'><a href='#' onclick='return false;' title='Windows[MS Office],Mac'>华文仿宋</a></span>,<span data-fonts='FangSong,FangSong_GB2312' data-name='仿宋'><a href='#' onclick='return false;' title='Windows,Mac'>仿宋</a></span>,<span data-fonts='CWTEX\-F' data-name='CWTEX仿宋体'><a href='#' onclick='return false;' title='CWTEX'>CWTEX仿宋体</a></span></div>
<div class="css">font-family: Baskerville, "Times New Roman", "Liberation Serif", STFangsong, FangSong, FangSong_GB2312, "CWTEX\-F", serif;</div>
<div class="notes"><li>某些 Linux 中 Times New Roman 会自动 fallback 到 Liberation Serif (具体见 /etc/fonts/conf.d/30-metric-aliases.conf, debian jessie/sid )</li><li>CWTEX仿宋体是繁体字型</li></div> </div>
<div class="collection">
<div class="tags"><li>Windows</li><li>Mac</li><li>Linux</li></div>
<h2 class="font-hei-regular">明体</h2>
<div class="text font-ming">
<ul>
<li class="size24">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size18">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size16">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size14">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
<li class="size12">我能吞下玻璃而不伤身体,The quick brown fox jumps over the lazy dog.</li>
</ul>
</div>
<div class="class">.font-ming</div>
<div class="css"><span data-fonts='Georgia' data-name='Georgia'><a href='#' onclick='return false;' title='Windows,Mac'>Georgia</a></span>,<span data-fonts='Nimbus Roman No9 L' data-name='Nimbus Roman No9'><a href='#' onclick='return false;' title='Linux'>Nimbus Roman No9</a></span>,<span data-fonts='AR PL UMing CN,AR PL UMing HK,AR PL UMing TW,AR PL UMing TW MBE' data-name='AR PL UMing'><a href='#' onclick='return false;' title='Linux'>AR PL UMing</a></span>,<span data-fonts='PMingLiU' data-name='新细明体'><a href='#' onclick='return false;' title='Windows,Mac'>新细明体</a></span>,<span data-fonts='MingLiU' data-name='细明体'><a href='#' onclick='return false;' title='Windows,Mac'>细明体</a></span></div>
<div class="css">font-family: Georgia, "Nimbus Roman No9 L", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif;</div>
</div>
</article>
<script src='js/font-detect.js'></script> <script src='js/main.js'></script> </body>