267 lines
8.8 KiB
Markdown
267 lines
8.8 KiB
Markdown
# 附录B：字体与文本字典 v3.1
|
||
|
||
> 角色：文本层映射字典
|
||
> 用途：处理 Tailwind `text-*`、`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 / right`
|
||
- `truncate`
|
||
- `whitespace-nowrap`
|
||
- `underline / 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>` 设置。
|
||
|
||
#### 正确做法
|
||
|
||
**全局设置：**
|
||
```wxss
|
||
page {
|
||
line-height: 1.5; /* Tailwind 默认行高 */
|
||
}
|
||
|
||
view {
|
||
line-height: inherit; /* view 继承 page 的 line-height */
|
||
}
|
||
|
||
/* text 会自动继承外层 view 的 line-height，不需要额外设置 */
|
||
```
|
||
|
||
**局部覆盖：**
|
||
```wxss
|
||
.section-title {
|
||
font-size: 26rpx;
|
||
line-height: 36rpx; /* 在 view 的 class 上设置，text 会继承 */
|
||
font-weight: 600;
|
||
}
|
||
```
|
||
|
||
```wxml
|
||
<view class="section-title">
|
||
<text>标题文本</text>
|
||
</view>
|
||
```
|
||
|
||
#### 错误做法
|
||
|
||
```wxss
|
||
/* ❌ 直接在 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 ≈ **26rpx**
|
||
- `text-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 执行准则
|
||
|
||
1. 标准字号表可直接用。
|
||
2. arbitrary 字号不许猜固定行高。
|
||
3. **line-height 必须在外层 view 上设置，不能直接在 text 上设置。**
|
||
4. 单行截断可直接迁移；多行截断需列入"条件能力"。
|
||
5. 文字高度不对时，优先检查：`line-height`、字重、padding、容器 `align-items`。
|
||
6. 小字号（9~13px）是本项目高频区，必须留足复核预算。
|
||
|
||
---
|
||
|
||
## B.9 附录结论
|
||
|
||
本表最重要的价值是：
|
||
|
||
- 让标准字号稳定落地
|
||
- 避免 AI 漏掉 line-height
|
||
- 防止 arbitrary 字号被机械"1.2 倍化"
|
||
- **明确 text 组件的 line-height 设置规则，避免无效设置**
|