han-css
Version:
The CSS typography framework optimised for Hanzi
108 lines (96 loc) • 8.5 kB
HTML
<html lang="zh-Hant" class="han-init"><head><meta charset="utf-8"><title>測試・四大字體集 — 漢字標準格式</title><link rel="stylesheet" href="./han.min.css"><style>html { overflow-x: hidden; }
article {
margin: 0 auto;
max-width: 35em;
padding: 0 .5em 15em;
}
#heiti-fantizi p:not(.noti) {
font-family: 'Biaodian Pro Sans CNS', 'Helvetica Neue', Arial, 'Han Heiti CNS', sans-serif;
}
.no-unicoderange #heiti-fantizi p:not(.noti) {
font-family: 'Helvetica Neue', Arial, 'Han Heiti CNS', sans-serif;
}
#heiti-zhongguo_guobiao p:not(.noti) {
font-family: 'Biaodian Pro Sans GB', 'Helvetica Neue', Arial, 'Han Heiti GB', sans-serif;
}
.no-unicoderange #heiti-zhongguo_guobiao p:not(.noti) {
font-family: 'Helvetica Neue', Arial, 'Han Heiti GB', sans-serif;
}
#songti p {
font-family: 'Biaodian Pro Serif', 'Numeral LF Serif', Georgia, 'Times New Roman', 'Han Songti', serif;
}
.no-unicoderange #songti p {
font-family: 'Numeral LF Serif', Georgia, 'Times New Roman', 'Han Songti', serif;
}
#songti-fantizi p {
font-family: 'Biaodian Pro Serif CNS', 'Numeral LF Serif', Georgia, 'Times New Roman', 'Han Songti CNS', serif;
}
.no-unicoderange #songti-fantizi p {
font-family: 'Numeral LF Serif', Georgia, 'Times New Roman', 'Han Songti CNS', serif;
}
#songti-zhongguo_guobiao p {
font-family: 'Biaodian Pro Serif GB', 'Numeral LF Serif', Georgia, 'Times New Roman', 'Han Songti GB', serif;
}
.no-unicoderange #songti-zhongguo_guobiao p {
font-family: 'Numeral LF Serif', Georgia, 'Times New Roman', 'Han Songti GB', serif;
}
#kaiti p:not(.noti) {
font-family: 'Biaodian Pro Serif', 'Numeral LF Serif', Georgia, 'Times New Roman', 'Han Kaiti', cursive, serif;
}
.no-unicoderange #kaiti p:not(.noti) {
font-family: 'Numeral LF Serif', Georgia, 'Times New Roman', 'Han Kaiti', cursive, serif;
}
#kaiti-fantizi p:not(.noti) {
font-family: 'Biaodian Pro Serif CNS', 'Numeral LF Serif', Georgia, 'Times New Roman', 'Han Kaiti CNS', cursive, serif;
}
.no-unicoderange #kaiti-fantizi p:not(.noti) {
font-family: 'Numeral LF Serif', Georgia, 'Times New Roman', 'Han Kaiti CNS', cursive, serif;
}
#kaiti-zhongguo_guobiao p:not(.noti) {
font-family: 'Biaodian Pro Serif GB', 'Numeral LF Serif', Georgia, 'Times New Roman', 'Han Kaiti GB', cursive, serif;
}
.no-unicoderange #kaiti-zhongguo_guobiao p:not(.noti) {
font-family: 'Numeral LF Serif', Georgia, 'Times New Roman', 'Han Kaiti GB', cursive, serif;
}
#fangsong p:not(.noti) {
font-family: 'Biaodian Pro Serif', 'Numeral LF Serif', Georgia, 'Times New Roman', 'Han Fangsong', cursive, serif;
}
.no-unicoderange #fangsong p:not(.noti) {
font-family: 'Numeral LF Serif', Georgia, 'Times New Roman', 'Han Fangsong', cursive, serif;
}
#fangsong-fantizi p {
font-family: 'Biaodian Pro Serif CNS', 'Numeral LF Serif', Georgia, 'Times New Roman', 'Han Fangsong CNS', cursive, serif;
}
.no-unicoderange #fangsong-fantizi p {
font-family: 'Numeral LF Serif', Georgia, 'Times New Roman', 'Han Fangsong CNS', cursive, serif;
}
#fangsong-zhongguo_guobiao p {
font-family: 'Biaodian Pro Serif GB', 'Numeral LF Serif', Georgia, 'Times New Roman', 'Han Fangsong GB', cursive, serif;
}
.no-unicoderange #fangsong-zhongguo_guobiao p {
font-family: 'Numeral LF Serif', Georgia, 'Times New Roman', 'Han Fangsong GB', cursive, serif;
}</style><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="印刷品般的漢字網頁排版框架"><meta name="keywords" content="漢字標準格式, 中文, 排版, 排版規範, 日文, 字體排印, 文字設計, CLReq, CSS, Sass, typography"></head><body class="test"><article><h1>測試·四大字體集</h1><section id="heiti"><h2>黑體</h2><section id="heiti-tuijian"><h3>推薦（舊字形，適用繁體中文）</h3><p>揚名山公路一〇二號出口旁的體育館附近，有家頗有名氣的米綫小吃店，<!--
-->其建築是殖民地時代啓用至今的。這家的牛骨湯濃郁而不油膩，<!--
-->非常值得一吃再吃。網路上查到的評價都對它讚不絕口！</p></section><section id="heiti-fantizi"><h3>繁體字（國字標準字體［字形］）</h3><p>揚名山公路一〇二號出口旁的體育館附近，有家頗有名氣的米綫小吃店，<!--
-->其建築是殖民地時代啟用至今的。這家的牛骨湯濃郁而不油膩，<!--
-->非常值得一吃再吃。網路上查到的評價都對它讚不絕口！</p></section><section id="heiti-zhongguo_guobiao"><h3>中國國家標準</h3><p>扬名山公路一〇二号出口旁的体育馆附近，有家颇有名气的米线小吃店，<!--
-->其建筑是殖民地时代啟用至今的。这家的牛骨汤浓郁而不油腻，<!--
-->非常值得一吃再吃。网路上查到的评价都对它赞不绝口！</p></section></section><section id="songti"><h2>宋體</h2><section id="songti-tuijian"><h3>推薦（舊字形，適用繁體中文）</h3><p>揚名山公路一〇二號出口旁的體育館附近，有家頗有名氣的米綫小吃店，<!--
-->其建築是殖民地時代啓用至今的。這家的牛骨湯濃郁而不油膩，<!--
-->非常值得一吃再吃。網路上查到的評價都對它讚不絕口！</p></section><section id="songti-fantizi"><h3>繁體字（國字標準字體［字形］）</h3><p>揚名山公路一〇二號出口旁的體育館附近，有家頗有名氣的米綫小吃店，<!--
-->其建築是殖民地時代啟用至今的。這家的牛骨湯濃郁而不油膩，<!--
-->非常值得一吃再吃。網路上查到的評價都對它讚不絕口！</p></section><section id="songti-zhongguo_guobiao"><h3>中國國家標準</h3><p>扬名山公路一〇二号出口旁的体育馆附近，有家颇有名气的米线小吃店，<!--
-->其建筑是殖民地时代啟用至今的。这家的牛骨汤浓郁而不油腻，<!--
-->非常值得一吃再吃。网路上查到的评价都对它赞不绝口！</p></section></section><section id="kaiti"><h2>楷體</h2><section id="kaiti-tuijian"><h3>推薦（舊字形，適用繁體中文）</h3><p>揚名山公路一〇二號出口旁的體育館附近，有家頗有名氣的米綫小吃店，<!--
-->其建築是殖民地時代啓用至今的。這家的牛骨湯濃郁而不油膩，<!--
-->非常值得一吃再吃。網路上查到的評價都對它讚不絕口！</p></section><section id="kaiti-fantizi"><h3>繁體字（國字標準字體［字形］）</h3><p>揚名山公路一〇二號出口旁的體育館附近，有家頗有名氣的米線小吃店，<!--
-->其建築是殖民地時代啟用至今的。這家的牛骨湯濃郁而不油膩，<!--
-->非常值得一吃再吃。網路上查到的評價都對它讚不絕口！</p></section><section id="kaiti-zhongguo_guobiao"><h3>中國國家標準</h3><p>扬名山公路一〇二号出口旁的体育馆附近，有家颇有名气的米线小吃店，<!--
-->其建筑是殖民地时代啟用至今的。这家的牛骨汤浓郁而不油腻，<!--
-->非常值得一吃再吃。网路上查到的评价都对它赞不绝口！</p></section></section><section id="fangsong"><h2>仿宋體</h2><p class="noti"><strong>提示：</strong>由於各主流作業系統皆未專為各地區變體提供「仿宋體」，以下三者為同一中國國標字形字體。</p><section id="fangsong-tuijian"><h3>推薦（舊字形，適用繁體中文）</h3><p>揚名山公路一〇二號出口旁的體育館附近，有家頗有名氣的米綫小吃店，<!--
-->其建築是殖民地時代啓用至今的。這家的牛骨湯濃郁而不油膩，<!--
-->非常值得一吃再吃。網路上查到的評價都對它讚不絕口！</p></section><section id="fangsong-fantizi"><h3>繁體字（國字標準字體［字形］）</h3><p>揚名山公路一〇二號出口旁的體育館附近，有家頗有名氣的米綫小吃店，<!--
-->其建築是殖民地時代啟用至今的。這家的牛骨湯濃郁而不油膩，<!--
-->非常值得一吃再吃。網路上查到的評價都對它讚不絕口！</p></section><section id="fangsong-zhongguo_guobiao"><h3>中國國家標準</h3><p>扬名山公路一〇二号出口旁的体育馆附近，有家颇有名气的米线小吃店，<!--
-->其建筑是殖民地时代啟用至今的。这家的牛骨汤浓郁而不油腻，<!--
-->非常值得一吃再吃。网路上查到的评价都对它赞不绝口！</p></section></section></article><script src="./han.min.js"></script></body></html>