han-css
Version:
The CSS typography framework optimised for Hanzi
20 lines (16 loc) • 2.1 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 {
/* position */
margin: 0 auto;
/* box */
max-width: 35em;
padding: 0 .5em 15em;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}</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><h2>無襯線</h2><p style="font-family: "Latin Italic Sans";">The quick brown fox jumps over a lazy dog.<br>0123456789 !§%&/()=?# @©®™ $€£¢ •°-_—<br>äöüß æÆ œŒ åÅ øØ çÇ ñÑ<br>ff fl ffl fi ffi st sst<br>abcdefghijklmnopqrstuvwxyz<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p><p style="font-family: "Latin Italic Sans";" class="bold">The quick brown fox jumps over a lazy dog.<br>0123456789 !§%&/()=?# @©®™ $€£¢ •°-_—<br>äöüß æÆ œŒ åÅ øØ çÇ ñÑ<br>ff fl ffl fi ffi st sst<br>abcdefghijklmnopqrstuvwxyz<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p><h2>襯線</h2><p style="font-family: "Numeral LF Italic Serif", "Latin Italic Serif";">The quick brown fox jumps over a lazy dog.<br>0123456789 !§%&/()=?# @©®™ $€£¢ •°-_—<br>äöüß æÆ œŒ åÅ øØ çÇ ñÑ<br>ff fl ffl fi ffi st sst<br>abcdefghijklmnopqrstuvwxyz<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p><p style="font-family: "Numeral LF Italic Serif", "Latin Italic Serif";" class="bold">The quick brown fox jumps over a lazy dog.<br>0123456789 !§%&/()=?# @©®™ $€£¢ •°-_—<br>äöüß æÆ œŒ åÅ øØ çÇ ñÑ<br>ff fl ffl fi ffi st sst<br>abcdefghijklmnopqrstuvwxyz<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p></article><script src="./han.min.js"></script></body></html>