han-css/test/numeral.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 {
        /* position */
        margin: 0 auto;

        /* box */
        max-width: 35em;
        padding: 0 .5em 15em;
      }

      .bold {
        font-weight: bold;
      }

      .italic {
        font-style: italic;
      }
    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 測試·數字
      h2 等高數字
      h3 無襯線
      p(style='font-family: "Numeral LF Sans";')
        | 1234567890
        br
        span.italic 1234567890
        br
        span.bold 1234567890
        br
        span.bold.italic 1234567890

      h3 襯線
      p(style='font-family: "Numeral LF Serif";')
        | 1234567890
        br
        span.italic 1234567890
        br
        span.bold 1234567890
        br
        span.bold.italic 1234567890
      h2 文本數字
      h3 無襯線
      p(style='font-family: "Numeral TF Sans";')
        | 1234567890
        br
        span.italic 1234567890
        br
        span.bold 1234567890
        br
        span.bold.italic 1234567890
      h3 襯線
      p(style='font-family: "Numeral TF Serif";')
        | 1234567890
        br
        span.italic 1234567890
        br
        span.bold 1234567890
        br
        span.bold.italic 1234567890

    script(src='./han.min.js')