han-css/test/generics.jade

The CSS typography framework optimised for Hanzi

doctype html
html(lang='zh-Hant').han-init
  head
    meta(charset='utf-8')
    title 測試・字體基型（typeface generics）與@extend — 漢字標準格式
    link(rel='stylesheet', href='./generics-han.css')
    style.
      html {
        overflow-x: hidden;
      }

      article {
        /* position */
        margin: 0 auto;

        /* box */
        max-width: 35em;
        padding: 0 .5em 15em;
      }
    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 測試·字體基型與<code>@extend</code>
      p.noti
        strong 提示：
        | 「漢字標準格式」提供了四類字體基型、二個子基型共六種字體<code>@extend</code>，<!--
        | -->在預設的語意元素修正外，更可經由Sass模組來擴展選擇器，<!--
        | -->避免字體的重覆宣告。
      p.noti
        strong 提示二：
        | 本測試頁<em>未</em>展示其他地區變體，<a href='//css.hanzi.co/manual'>詳見使用手冊</a>。
      section
        h2 無襯線字體、黑體
        p.sans
          | LGBT是女同性戀者（Lesbians）、男同性戀者（Gays）、雙性戀者（Bisexuals）與跨性別者（Transgender）的英文首字母縮略字。1990年代，由於「同性戀社群」一詞無法完整體現相關群體，「LGBT」一詞便應運而生、並逐漸普及。
        h3 西文無襯線意大利體、黑體
        p.sans-italic
          | LGBT是女同性戀者（Lesbians）、男同性戀者（Gays）、雙性戀者（Bisexuals）與跨性別者（Transgender）的英文首字母縮略字。1990年代，由於「同性戀社群」一詞無法完整體現相關群體，「LGBT」一詞便應運而生、並逐漸普及。
      section
        h2 等寬字體、黑體
        p.mono
          | LGBT是女同性戀者（Lesbians）、男同性戀者（Gays）、雙性戀者（Bisexuals）與跨性別者（Transgender）的英文首字母縮略字。1990年代，由於「同性戀社群」一詞無法完整體現相關群體，「LGBT」一詞便應運而生、並逐漸普及。
      section
        h2 襯線字體、宋體
        p.serif
          | LGBT是女同性戀者（Lesbians）、男同性戀者（Gays）、雙性戀者（Bisexuals）與跨性別者（Transgender）的英文首字母縮略字。1990年代，由於「同性戀社群」一詞無法完整體現相關群體，「LGBT」一詞便應運而生、並逐漸普及。
      section
        h2 手寫字體、楷體
        p.cursive
          | LGBT是女同性戀者（Lesbians）、男同性戀者（Gays）、雙性戀者（Bisexuals）與跨性別者（Transgender）的英文首字母縮略字。1990年代，由於「同性戀社群」一詞無法完整體現相關群體，「LGBT」一詞便應運而生、並逐漸普及。
        h3 西文襯線意大利體、楷體
        p.cursive-italic
          | LGBT是女同性戀者（Lesbians）、男同性戀者（Gays）、雙性戀者（Bisexuals）與跨性別者（Transgender）的英文首字母縮略字。1990年代，由於「同性戀社群」一詞無法完整體現相關群體，「LGBT」一詞便應運而生、並逐漸普及。

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