TYPOGRAPHY
数字大字排版Numeric Display
超大数字用 tabular-nums 等宽 + 紧字距，跳动时不抖、排版不散。
效果预览
128,400月收入（元）
99.9%服务可用性
4.9★商店评分
适合用在哪
价格、KPI、统计带、倒计时、报表。
容易踩的坑
- 所选字体不含 tabular 数字特性，设置 tabular-nums 也无效，动画时照样抖动。
- 千分位写死逗号，德语等地区应为点号，应使用 Intl.NumberFormat 本地化。
- 单位缩小后用 span 包裹却没留空格，读屏把「12,840 元」念成连续乱码。
设计提示词 · Prompt
数字大字排版（Numeric Display）：大数字专用规则——font-variant-numeric:tabular-nums（等宽数字，动画时不抖动）、letter-spacing:-0.02~-0.04em、字重 700-800、行高 1（防止行框撑高）。单位与货币符号缩小到 40-50%、字重 500、颜色降一阶（¥、%、/月）。千分位逗号必加（12,840 比 12840 易读一个量级）。中文语境下数字用系统数字字体即可，避免衬线数字。对齐场景（表格、并排卡片）所有数字右对齐——个位对齐才能纵向比较。
Numeric Display: rules for large numbers — font-variant-numeric:tabular-nums (fixed-width digits, no jitter during animation), letter-spacing:-0.02~-0.04em, weight 700-800, line-height 1 (to avoid inflated line boxes). Shrink units and currency symbols to 40-50%, weight 500, one step lighter in color (¥, %, /mo). Always add thousands separators (12,840 is an order of magnitude easier to read than 12840). In Chinese contexts the system numeric font is fine; avoid serif numerals. In alignment contexts (tables, side-by-side cards) right-align all numbers — only aligned units digits allow vertical comparison.
常见搭配
同一页面里经常和「数字大字排版」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-numdisp"> <div class="d-numdisp__item"><b>128<small>,400</small></b><span>月收入（元）</span></div> <div class="d-numdisp__item"><b>99<small>.9%</small></b><span>服务可用性</span></div> <div class="d-numdisp__item"><b>4.9<small>★</small></b><span>商店评分</span></div> </div>