han-css
Version:
The CSS typography framework optimised for Hanzi
14 lines (12 loc) • 3.39 kB
HTML
<html lang="zh-Hant" class="han-init"><head><meta charset="utf-8"><title>測試・字體基型(typeface generics)與@extend — 漢字標準格式</title><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;
}</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>測試·字體基型與<code>@extend</code></h1><p class="noti"><strong>提示:</strong>「漢字標準格式」提供了四類字體基型、二個子基型共六種字體<code>@extend</code>,<!--
-->在預設的語意元素修正外,更可經由Sass模組來擴展選擇器,<!--
-->避免字體的重覆宣告。</p><p class="noti"><strong>提示二:</strong>本測試頁<em>未</em>展示其他地區變體,<a href='//css.hanzi.co/manual'>詳見使用手冊</a>。</p><section><h2>無襯線字體、黑體</h2><p class="sans">LGBT是女同性戀者(Lesbians)、男同性戀者(Gays)、雙性戀者(Bisexuals)與跨性別者(Transgender)的英文首字母縮略字。1990年代,由於「同性戀社群」一詞無法完整體現相關群體,「LGBT」一詞便應運而生、並逐漸普及。</p><h3>西文無襯線意大利體、黑體</h3><p class="sans-italic">LGBT是女同性戀者(Lesbians)、男同性戀者(Gays)、雙性戀者(Bisexuals)與跨性別者(Transgender)的英文首字母縮略字。1990年代,由於「同性戀社群」一詞無法完整體現相關群體,「LGBT」一詞便應運而生、並逐漸普及。</p></section><section><h2>等寬字體、黑體</h2><p class="mono">LGBT是女同性戀者(Lesbians)、男同性戀者(Gays)、雙性戀者(Bisexuals)與跨性別者(Transgender)的英文首字母縮略字。1990年代,由於「同性戀社群」一詞無法完整體現相關群體,「LGBT」一詞便應運而生、並逐漸普及。</p></section><section><h2>襯線字體、宋體</h2><p class="serif">LGBT是女同性戀者(Lesbians)、男同性戀者(Gays)、雙性戀者(Bisexuals)與跨性別者(Transgender)的英文首字母縮略字。1990年代,由於「同性戀社群」一詞無法完整體現相關群體,「LGBT」一詞便應運而生、並逐漸普及。</p></section><section><h2>手寫字體、楷體</h2><p class="cursive">LGBT是女同性戀者(Lesbians)、男同性戀者(Gays)、雙性戀者(Bisexuals)與跨性別者(Transgender)的英文首字母縮略字。1990年代,由於「同性戀社群」一詞無法完整體現相關群體,「LGBT」一詞便應運而生、並逐漸普及。</p><h3>西文襯線意大利體、楷體</h3><p class="cursive-italic">LGBT是女同性戀者(Lesbians)、男同性戀者(Gays)、雙性戀者(Bisexuals)與跨性別者(Transgender)的英文首字母縮略字。1990年代,由於「同性戀社群」一詞無法完整體現相關群體,「LGBT」一詞便應運而生、並逐漸普及。</p></section><script src="./han.min.js"></script></article></body></html>