han-css/test/four.jade

The CSS typography framework optimised for Hanzi

doctype html
html(lang='zh-Hant').han-init
  head
    meta(charset='utf-8')
    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;
      }
    meta(name='viewport' content='width=device-width, initial-scale=1.0')
    meta(name='description' content='印刷品般的漢字網頁排版框架')
    meta(name='keywords' content='漢字標準格式, 中文, 排版, 排版規範, 日文, 字體排印, 文字設計, CLReq, CSS, Sass, typography')
  body.test

    article
      h1 測試·四大字體集
      section#heiti
        h2 黑體
        section#heiti-tuijian
          h3 推薦（舊字形，適用繁體中文）
          p
            | 揚名山公路一〇二號出口旁的體育館附近，有家頗有名氣的米綫小吃店，<!--
            | -->其建築是殖民地時代啓用至今的。這家的牛骨湯濃郁而不油膩，<!--
            | -->非常值得一吃再吃。網路上查到的評價都對它讚不絕口！
        section#heiti-fantizi
          h3 繁體字（國字標準字體［字形］）
          p
            | 揚名山公路一〇二號出口旁的體育館附近，有家頗有名氣的米綫小吃店，<!--
            | -->其建築是殖民地時代啟用至今的。這家的牛骨湯濃郁而不油膩，<!--
            | -->非常值得一吃再吃。網路上查到的評價都對它讚不絕口！
        section#heiti-zhongguo_guobiao
          h3 中國國家標準
          p
            | 扬名山公路一〇二号出口旁的体育馆附近，有家颇有名气的米线小吃店，<!--
            | -->其建筑是殖民地时代啟用至今的。这家的牛骨汤浓郁而不油腻，<!--
            | -->非常值得一吃再吃。网路上查到的评价都对它赞不绝口！
      section#songti
        h2 宋體
        section#songti-tuijian
          h3 推薦（舊字形，適用繁體中文）
          p
            | 揚名山公路一〇二號出口旁的體育館附近，有家頗有名氣的米綫小吃店，<!--
            | -->其建築是殖民地時代啓用至今的。這家的牛骨湯濃郁而不油膩，<!--
            | -->非常值得一吃再吃。網路上查到的評價都對它讚不絕口！
        section#songti-fantizi
          h3 繁體字（國字標準字體［字形］）
          p
            | 揚名山公路一〇二號出口旁的體育館附近，有家頗有名氣的米綫小吃店，<!--
            | -->其建築是殖民地時代啟用至今的。這家的牛骨湯濃郁而不油膩，<!--
            | -->非常值得一吃再吃。網路上查到的評價都對它讚不絕口！
        section#songti-zhongguo_guobiao
          h3 中國國家標準
          p
            | 扬名山公路一〇二号出口旁的体育馆附近，有家颇有名气的米线小吃店，<!--
            | -->其建筑是殖民地时代啟用至今的。这家的牛骨汤浓郁而不油腻，<!--
            | -->非常值得一吃再吃。网路上查到的评价都对它赞不绝口！
      section#kaiti
        h2 楷體
        section#kaiti-tuijian
          h3 推薦（舊字形，適用繁體中文）
          p
            | 揚名山公路一〇二號出口旁的體育館附近，有家頗有名氣的米綫小吃店，<!--
            | -->其建築是殖民地時代啓用至今的。這家的牛骨湯濃郁而不油膩，<!--
            | -->非常值得一吃再吃。網路上查到的評價都對它讚不絕口！
        section#kaiti-fantizi
          h3 繁體字（國字標準字體［字形］）
          p
            | 揚名山公路一〇二號出口旁的體育館附近，有家頗有名氣的米線小吃店，<!--
            | -->其建築是殖民地時代啟用至今的。這家的牛骨湯濃郁而不油膩，<!--
            | -->非常值得一吃再吃。網路上查到的評價都對它讚不絕口！
        section#kaiti-zhongguo_guobiao
          h3 中國國家標準
          p
            | 扬名山公路一〇二号出口旁的体育馆附近，有家颇有名气的米线小吃店，<!--
            | -->其建筑是殖民地时代啟用至今的。这家的牛骨汤浓郁而不油腻，<!--
            | -->非常值得一吃再吃。网路上查到的评价都对它赞不绝口！
      section#fangsong
        h2 仿宋體
        p.noti
          strong 提示：
          | 由於各主流作業系統皆未專為各地區變體提供「仿宋體」，以下三者為同一中國國標字形字體。
        section#fangsong-tuijian
          h3 推薦（舊字形，適用繁體中文）
          p
            | 揚名山公路一〇二號出口旁的體育館附近，有家頗有名氣的米綫小吃店，<!--
            | -->其建築是殖民地時代啓用至今的。這家的牛骨湯濃郁而不油膩，<!--
            | -->非常值得一吃再吃。網路上查到的評價都對它讚不絕口！
        section#fangsong-fantizi
          h3 繁體字（國字標準字體［字形］）
          p
            | 揚名山公路一〇二號出口旁的體育館附近，有家頗有名氣的米綫小吃店，<!--
            | -->其建築是殖民地時代啟用至今的。這家的牛骨湯濃郁而不油膩，<!--
            | -->非常值得一吃再吃。網路上查到的評價都對它讚不絕口！
        section#fangsong-zhongguo_guobiao
          h3 中國國家標準
          p
            | 扬名山公路一〇二号出口旁的体育馆附近，有家颇有名气的米线小吃店，<!--
            | -->其建筑是殖民地时代啟用至今的。这家的牛骨汤浓郁而不油腻，<!--
            | -->非常值得一吃再吃。网路上查到的评价都对它赞不绝口！
    script(src='./han.min.js')