54 lines
2.8 KiB
HTML
54 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>门户字体阶梯预览</title>
|
||
<link rel="stylesheet" href="../tokens/font-tokens.css" />
|
||
<style>
|
||
body { padding: 40px; max-width: 900px; margin: 0 auto; background: #f7f8fa; }
|
||
h1 { font: var(--page-font-section-title); margin-bottom: 8px; }
|
||
.meta { color: rgba(0,0,0,.6); font-size: 14px; margin-bottom: 32px; }
|
||
section { background: #fff; border-radius: 8px; padding: 24px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
|
||
section h2 { font-size: 14px; color: #666; margin: 0 0 16px; font-weight: 500; }
|
||
.row { display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; border-bottom: 1px solid #eee; padding-bottom: 12px; }
|
||
.row:last-child { border: none; margin: 0; padding: 0; }
|
||
.label { width: 140px; flex-shrink: 0; font-size: 12px; color: #999; font-family: monospace; }
|
||
.s10 { font-size: 10px; }
|
||
.s12 { font-size: 12px; }
|
||
.s14 { font-size: 14px; }
|
||
.s16 { font-size: 16px; }
|
||
.s18 { font-size: 18px; font-weight: 500; }
|
||
.s22 { font-size: 22px; font-weight: 600; }
|
||
.s24 { font-size: 24px; font-weight: 600; }
|
||
.s28 { font-size: 28px; font-weight: 700; }
|
||
.s32 { font-size: 32px; font-weight: 600; }
|
||
.display { font: var(--page-font-display-title); }
|
||
.nav { font: var(--page-font-nav); }
|
||
.body { font: var(--page-font-body); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>门户字体阶梯预览</h1>
|
||
<p class="meta">主字体：PingFang SC → Microsoft YaHei → Arial。用浏览器打开本文件即可。</p>
|
||
|
||
<section>
|
||
<h2>门户常用字号</h2>
|
||
<div class="row"><span class="label">32px / 600</span><span class="s32">屏级大标题 — 共性能力平台</span></div>
|
||
<div class="row"><span class="label">28px / 700</span><span class="s28">强调主标题</span></div>
|
||
<div class="row"><span class="label">24px / 600</span><span class="s24">模块标题</span></div>
|
||
<div class="row"><span class="label">22px / 600</span><span class="s22">区块小标题</span></div>
|
||
<div class="row"><span class="label">18px / 500</span><span class="s18">副标题与强调句</span></div>
|
||
<div class="row"><span class="label">16px / 400</span><span class="nav">导航与正文（16px）</span></div>
|
||
<div class="row"><span class="label">14px / 400</span><span class="body">次要说明文字（14px）</span></div>
|
||
<div class="row"><span class="label">12px</span><span class="s12">辅助信息</span></div>
|
||
<div class="row"><span class="label">10px</span><span class="s10">角标（慎用）</span></div>
|
||
</section>
|
||
|
||
<section>
|
||
<h2>展示字（Banner）</h2>
|
||
<p class="display">方正正黑 / 苹方 — 企业出海服务</p>
|
||
</section>
|
||
</body>
|
||
</html>
|