8.8 KiB
8.8 KiB
附录B：字体与文本字典 v3.1
角色：文本层映射字典
用途：处理 Tailwindtext-*、leading-*、font-*、文本对齐、省略、装饰、字距等
核心原则：标准字号可表驱动；arbitrary 字号不得拍脑袋推导行高
v3.1 更新：补充微信小程序 text 组件的 line-height 设置规则
B.1 使用边界
B.1.1 本附录可以直接用于
- 标准
text-xs/sm/base/lg/xl/2xl/3xl - 标准
font-normal / medium / semibold / bold text-left / center / righttruncatewhitespace-nowrapunderline / line-through- 常见
leading-* - 常见
tracking-*
B.1.2 本附录不能直接替代视觉提取的场景
- arbitrary
text-[Npx] - 多层嵌套文本组合
- 特殊数字对齐
- 自定义字体族
- 同时依赖字重、字距、行高的标题排版
- 富文本渲染
B.2 核心规则
B.2.1 标准字号类：必须同时写字号与行高
Tailwind 标准字号 utility 自带默认 line-height。
因此，迁移到 WXSS 时，不能只写 font-size，遗漏 line-height。
B.2.2 Arbitrary 字号：不允许按"1.2 倍"硬猜
对 text-[10px]、text-[11px] 这类 arbitrary 字号：
- 不允许在项目规范中统一假定其
line-height = 1.2 × font-size - 必须优先读取原型计算样式，或以页面实际视觉高度为准
- 若确实拿不到计算样式，可先给"临时候选值"，但必须标记为待复核
B.2.3 微信小程序 text 组件的 line-height 设置规则 ⚠️
关键发现：微信小程序的 <text> 组件不能直接设置 line-height，必须通过外层 <view> 设置。
正确做法
全局设置：
page {
line-height: 1.5; /* Tailwind 默认行高 */
}
view {
line-height: inherit; /* view 继承 page 的 line-height */
}
/* text 会自动继承外层 view 的 line-height，不需要额外设置 */
局部覆盖：
.section-title {
font-size: 26rpx;
line-height: 36rpx; /* 在 view 的 class 上设置，text 会继承 */
font-weight: 600;
}
<view class="section-title">
<text>标题文本</text>
</view>
错误做法
/* ❌ 直接在 text 上设置 line-height 无效 */
text {
line-height: 36rpx; /* 不会生效 */
}
/* ❌ 添加 display: inline-block 也无效 */
text {
display: inline-block;
line-height: 36rpx; /* 仍然不会生效 */
}
原因
- 微信小程序的
<text>是特殊的内联组件 - 直接在
<text>上设置line-height不生效 - 必须在外层
<view>上设置，text 会自动继承 - 这是平台限制，不是 CSS 问题
验证方法
- 在开发者工具的 Computed 面板中，text 元素不会显示
line-height属性 - 但外层 view 的
height值会包含行高效果 - 以真机视觉效果为准
B.3 标准字号 → WXSS 对照表
以下表格可作为硬映射白名单使用。
| Tailwind class | font-size | line-height | H5 px | WXSS 建议写法 | 备注 |
|---|---|---|---|---|---|
text-xs |
0.75rem |
1rem |
12 / 16 | font-size: 22rpx; line-height: 29rpx; |
可直接使用 |
text-sm |
0.875rem |
1.25rem |
14 / 20 | font-size: 26rpx; line-height: 36rpx; |
可直接使用 |
text-base |
1rem |
1.5rem |
16 / 24 | font-size: 30rpx; line-height: 44rpx; |
可直接使用 |
text-lg |
1.125rem |
1.75rem |
18 / 28 | font-size: 33rpx; line-height: 51rpx; |
可直接使用 |
text-xl |
1.25rem |
1.75rem |
20 / 28 | font-size: 36rpx; line-height: 51rpx; |
可直接使用 |
text-2xl |
1.5rem |
2rem |
24 / 32 | font-size: 44rpx; line-height: 58rpx; |
可直接使用 |
text-3xl |
1.875rem |
2.25rem |
30 / 36 | font-size: 54rpx; line-height: 66rpx; |
可直接使用 |
换算公式：
font-size(rpx) = font-size(px) × 1.8204
line-height(rpx) = line-height(px) × 1.8204
示例：
text-sm的 font-size = 14px × 1.8204 = 25.49rpx ≈ 26rpxtext-sm的 line-height = 20px × 1.8204 = 36.41rpx ≈ 36rpx
B.4 Arbitrary 字号候选表（仅候选，不是硬规则）
来源：旧桥文档中项目高频小字号总结。
这些值可用于初始落地，但必须经过真机视觉复核。
| Tailwind class | font-size(px) | WXSS 候选 font-size |
line-height 处理规则 |
风险级别 |
|---|---|---|---|---|
text-[9px] |
9 | 16rpx | 禁止硬猜，需按原型提取或视觉校准 | 高 |
text-[10px] |
10 | 18rpx | 同上 | 高 |
text-[11px] |
11 | 20rpx | 同上 | 高 |
text-[12px] |
12 | 22rpx | 同上 | 高 |
text-[13px] |
13 | 24rpx | 同上 | 高 |
B.4.1 若拿不到原型计算样式时的临时占位策略
仅用于先产出页面、后做复核的场景：
- 单行文本：可先不显式写
line-height，由真实内容撑开后观察 - 双行及以上文本：先给一个略宽松的
line-height候选，再做真机校正 - 一旦发现文本块高度、裁切、对齐异常，必须回到原型测量
这条是应急策略，不是长期规范。
B.5 Font Weight 映射表
| Tailwind class | CSS font-weight | WXSS 写法 | 备注 |
|---|---|---|---|
font-normal |
400 | font-weight: 400; |
可直接使用 |
font-medium |
500 | font-weight: 500; |
注意不是 600 |
font-semibold |
600 | font-weight: 600; |
可直接使用 |
font-bold |
700 | font-weight: 700; |
可直接使用 |
B.6 Font Family / 字体族处理规则
| Tailwind class | 默认含义 | 小程序迁移建议 |
|---|---|---|
font-sans |
系统无衬线字体栈 | 允许省略，交由系统默认字体；若页面强依赖，则单独定义字体栈 |
font-serif |
系统衬线字体栈 | 本项目一般不建议使用 |
font-mono |
等宽字体栈 | 仅在数字/代码块等特殊场景使用 |
font-[...] |
自定义字体族 | 必须单独评估是否可在小程序端稳定落地 |
建议
- 业务正文、列表、表单：优先使用系统默认字体策略
- 若页面依赖特定数字对齐效果，再单独处理数字字体
B.7 其他文本属性映射表
B.7.1 文本对齐
| Tailwind class | WXSS |
|---|---|
text-left |
text-align: left; |
text-center |
text-align: center; |
text-right |
text-align: right; |
B.7.2 溢出与省略
| Tailwind class | WXSS 建议写法 | 备注 |
|---|---|---|
truncate |
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; |
可直接使用 |
whitespace-nowrap |
white-space: nowrap; |
可直接使用 |
line-clamp-2 |
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; |
条件能力，需实测 |
line-clamp-3 |
同上，-webkit-line-clamp: 3 |
条件能力，需实测 |
B.7.3 Line-height 工具类
| Tailwind class | CSS | WXSS |
|---|---|---|
leading-none |
line-height: 1 |
line-height: 1; |
leading-tight |
line-height: 1.25 |
line-height: 1.25; |
leading-snug |
line-height: 1.375 |
line-height: 1.375; |
leading-normal |
line-height: 1.5 |
line-height: 1.5; |
leading-relaxed |
line-height: 1.625 |
line-height: 1.625; |
leading-loose |
line-height: 2 |
line-height: 2; |
B.7.4 Letter-spacing / 字距
| Tailwind class | CSS | WXSS |
|---|---|---|
tracking-tight |
letter-spacing: -0.025em |
letter-spacing: -0.025em; |
tracking-normal |
letter-spacing: 0 |
letter-spacing: 0; |
tracking-wide |
letter-spacing: 0.025em |
letter-spacing: 0.025em; |
tracking-wider |
letter-spacing: 0.05em |
letter-spacing: 0.05em; |
tracking-widest |
letter-spacing: 0.1em |
letter-spacing: 0.1em; |
B.7.5 文本装饰
| Tailwind class | WXSS |
|---|---|
underline |
text-decoration: underline; |
line-through |
text-decoration: line-through; |
italic |
font-style: italic; |
not-italic |
font-style: normal; |
B.7.6 数字排版
| Tailwind class | 处理建议 |
|---|---|
tabular-nums |
若小程序端表现不稳定，不作为硬依赖；涉及金额/绩效表格时优先真机验证 |
lining-nums / oldstyle-nums |
同上，不建议直接作为项目硬规范 |
B.8 文本层 AI 执行准则
- 标准字号表可直接用。
- arbitrary 字号不许猜固定行高。
- line-height 必须在外层 view 上设置，不能直接在 text 上设置。
- 单行截断可直接迁移；多行截断需列入"条件能力"。
- 文字高度不对时，优先检查：
line-height、字重、padding、容器align-items。 - 小字号（9~13px）是本项目高频区，必须留足复核预算。
B.9 附录结论
本表最重要的价值是：
- 让标准字号稳定落地
- 避免 AI 漏掉 line-height
- 防止 arbitrary 字号被机械"1.2 倍化"
- 明确 text 组件的 line-height 设置规则，避免无效设置