|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
# 用混合字体对齐 Skill 处理数字符号和段落环绕 中文、数字、负号和箭头混排时，容器居中与字形居中需要分别处理。下面这份 Skill 固定排查顺序，保留原字体与完整文案，覆盖同高布局、字形校正、段落环绕和跨端验收，避免反复叠加像素偏移。 将下方完整内容保存为 `mixed-font-alignment/SKILL.md`。 ```markdown --- name: mixed-font-alignment description: 修复 Web 和 WebView 中中文、数字、符号及图标混排的垂直对齐，以及段落标签、正文和来源的自然换行。适用于 flex 居中后仍有字面偏差、正负数基线不一致或行内标签破坏环绕的任务；不用于单独的字号缩放或一般文本省略。 --- # 混合字体对齐与行内环绕 按“统一内部高度 → flex 居中 → 有可靠度量才校正原字体字形 → 全状态验证”执行。先复用已有组件，只改当前问题相关部分；同一 Web 实现供浏览器及 iOS、Android 宿主使用，不按系统堆两套偏移。原生或自绘控件使用本端布局与字体度量，不套用 DOM、CSS 或 SVG。 ## 开始前确认输入 读取受影响组件、样式及已有失败方案。确认目标运行时与最低版本、原始复现路径、指定字体及字重、字号与行高、主辅行高度、图标尺寸、完整文案及支持状态。核实字体文件与实际回退；缺少影响判断的输入时先补齐，不猜通用校正值，不重复无新证据的失败路径。 ## 统一布局并居中 1. 给父行明确设计高度和 `align-items: center`。名称、数值、前缀的实际文字容器也须同高，使用 flex 或 inline-flex，内部双轴居中，高度继承父行，文字可用 `line-height: normal`。主辅行分别使用各自设计高度，不强行统一字号。 2. 名称保留 `min-width: 0`；数值、按钮禁止收缩；行内间距用 margin。图标显式设置 CSS 宽高、`display: block`、`flex-shrink: 0`，与文字使用同一 px/rem 缩放体系；不假定 SVG 数字宽高属性会随 px-to-rem 转换。 3. 日期胶囊先固定内部高度，再居中文字与箭头，单独核对间距。图标框保留设计尺寸并共享行中心线。 4. 保留指定字体族、字重、字形和内容。不要按系统或正负值移动整行；只让父层 flex 居中、子项仍用不同自然行高，不算完成。 ## 有度量后再校正原字体 1. 同高布局正确但笔画仍偏移时，核对实际字体和各字重度量。CSS 字体名相同或 `document.fonts.check()` 成功，不能单独证明未回退。用 `(yMin + yMax) / 2 / unitsPerEm` 记录字形归一化中心，结合实际字号与 SVG 坐标验证偏移方向。 2. 必要时采用原字体的单个 SVG `text`，以 `y="50%"` 定位，再应用已验证校正。同文 DOM 承担固有宽度与可访问文本；SVG 设置 `aria-hidden="true"`。逐字保持原文，不改成图片、替代符号或修改字体文件。 3. 统一无符号正数、负数和零的数字基线。单个 `text` 的 `dy` 为相对偏移列表：无符号首字符用数字中心；带符号首字符用符号中心，第二字符用“数字中心 − 符号中心”，其余为零。先将中心换为当前字号下的已验证偏移量，再核对 SVG 用户坐标与长度单位；存在 viewBox 或缩放时，不能把字体单位或 CSS px 直接当作 SVG 用户坐标。字重、占位符、不同符号分别核对。 4. 中文、日期及原文符号使用实际字体的已验证度量；未知字体保留常规排版。字体加载后刷新，按字体族、字重和样式缓存，不逐项反复探测。 5. 保留单一定位机制，撤销本次被替代的局部补偿，勿叠加父层偏移。分别检查整串基线与符号内部校正。不拆负号继续补偿，不假定父 `text` 与首个 `tspan` 的 dy 按设想累加。 ## 保留段落自然环绕 正文使用普通行内 span；标签和来源使用 inline-flex，内部双轴居中，三者统一 `vertical-align: middle` 后实测。不要把整段改成 flex/grid，或让正文独占一列。 保留段落设计行高；标签固定高度，内部文字及正文可用 `line-height: normal`。不同字号受父级行盒影响时，可保留行高并将父级字号置零，但所有子文字须显式恢复设计字号，并验证实际段落。 标签使用完整原文，包括已有竖线；不要另造分隔线。来源文字、数量、加号和箭头保持同组，续行回到段落左边缘，逐项检查字面中心。分别测量左右 padding 与外部 margin，扣除边框并考虑 min-width、字形侧边距，不凭遮罩添加不对称留白。 ## 排除无依据的修复 禁止换字体、使用字体别名或修改字体文件来掩盖错位；禁止只改 line-height、反复试 top/translateY、用 `line-height: 1` 叠加补偿。未经目标字体与设备验证，不把 `text-rendering: geometricPrecision` 或 Canvas 符号度量作为最终方案。 若同时涉及省略，先复用本端原生能力与有效宽度约束，保留完整原文和交互。不得静默换对齐或裁剪字符串。检查最终文本层，末字截半和硬裁切不算省略成功；居中与省略分别验收。只有明确要求先缩字号时才增加该行为。 ## 验收与交付证据 复用当前前台页面，刷新确认最新代码和字体。先验证目标浏览器，再对本次支持的 iOS 真机与 Android 宿主交叉检查，记录实际系统、引擎、设备及真机或模拟器范围；缺少目标环境时明确列出。 覆盖主辅行、正数、负数、零、百分号、不同字号、短长名称、展开收起；存在显式正号、占位符、换行时一并覆盖。检查日期、标签、来源、箭头、内部同高、笔画中心、间距和裁切。验证字体加载、字号放大再还原、容器变化、内容更新和隐藏恢复；合并刷新任务，过滤自身写入并在卸载时清理监听。 涉及省略时另测空文本、未溢出、恰好容纳和超限，核对真实末行、可见末行及省略号避让，状态能出现也能取消。 使用有效截图检查真实字形；后台页面、重复异常长截图和 JPEG 不作精细像素证据。区分 CSS 与物理像素，不把抗锯齿亚像素差直接判为居中或未居中。DOMRect、理论中心或单条负数截图不能替代整体验证。 交付说明根因、改动、实际状态矩阵与截图范围，列出未验证环境和残余符号偏差。用户仍反馈异常时不得宣布通过；暂缓不记为解决，单字体或单设备结果不推广为全部兼容。 ``` ## 两个调用例子 1. “使用 mixed-font-alignment 检查这个数值卡片。中文名称和数字字体保持现状，父行已经 flex 居中，但负号偏上。请同时验证正数、负数、零，以及主行和辅助行。” 2. “使用 mixed-font-alignment 修复段落里的标签与来源。正文需要自然环绕，来源的文字、数量和箭头保持同组。请保留完整文案，检查窄屏换行和字号放大后的效果。” |