2em在某些字体下显得太宽，因中文字体字宽差异大导致相同font-size下像素宽度不同；可微调为1.8em/2.2em、改用2ch，或在极端场景用伪元素+JS动态测量全角空格宽度。
text-indent: 2em 为什么在某些字体下显得太宽
2em 是中文排版的基准值，但它基于当前 font-size 和浏览器对“1em = 当前字号” 的解释，而不同中文字体的字宽差异很大。比如 "Noto Sans CJK SC" 比 "Microsoft YaHei" 更窄，"Source Han Serif" 又偏宽；同一 font-size: 16px 下，“2em” 实际占据的像素宽度可能相差 ±4px。这不是 bug，是字体度量（font metrics）天然不统一导致的。
微调的关键不是推翻 2em，而是用更贴合当前字体的单位或微偏移：
-
2ch比2em更精确——它按 “0” 字符的等宽计算，对多数等宽/准等宽中文字体（如"Fira Code CN","Cascadia Code PL"）效果更稳 - 若用常规比例字体，可试
1.8em或2.2em：比整数更易避开渲染舍入误差，尤其在小字号（14px）下明显 - 避免用
rem微调——它依赖根元素font-size，一旦项目里有动态字号切换（如夜间模式、用户偏好），缩进会意外跳变
伪元素 + width 测量法：当必须精准到像素
极少数场景（如出版级排版、PDF 导出预览）要求首行缩进严格等于两个汉字视觉宽度，而字体又不支持 ch 单位或 text-rendering: optimizeLegibility 无效时，就得绕过纯 CSS。
思路是：用 ::before 插入一个不可见但可测宽的参考字符（如全角空格 \u3000），再通过 JS 读取其 getBoundingClientRect().width，动态设 text-indent：
.tight-indent {
position: relative;
}
.tight-indent::before {
content: "\u3000\u3000";
visibility: hidden;
position: absolute;
left: -9999px;
}
然后 JS 中：
document.querySelectorAll('.tight-indent').forEach(el => {
const ref = el.querySelector('::before'); // 注意：实际需用 getComputedStyle 或临时 clone 测量
// 真实实现略复杂，需创建临时 span 测量两个全角空格宽度
el.style.textIndent = `${measuredWidth}px`;
});
⚠️ 这种做法开销大、FOUC 风险高，仅限静态内容且对齐精度要求 >1px 的场景。日常网页完全没必要。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
移动端缩进突然变宽的真正原因和对策
iOS Safari 和部分安卓 Chrome 在用户开启「更大字体」或双指放大后，会把 1em 重算为系统放大后的逻辑字号（比如标称 16px，实际渲染按 24px 算），导致 text-indent: 2em 被撑成 48px —— 看起来“太宽”，其实是可访问性机制在起作用。
不能禁用它，但可以约束边界：
- 坚持用
text-indent: 2em，这是唯一被浏览器尊重的语义化缩进方式 - 加媒体查询兜底：
@media (min-resolution: 2dppx) and (max-width: 480px) { .indent { text-indent: 1.6em; } } - 禁用
padding-left或margin-left替代方案——它们在 zoom 后不会缩放，反而造成缩进与行宽严重失配
首段缩进被误删后“看起来太宽”的错觉
很多所谓“缩进太宽”，其实是首段没清 text-indent，而后续段落又叠加了默认 margin-top，造成首行下沉+缩进双重偏移，视觉上像缩进夸张。典型表现：第一段顶着标题下方，第二段却明显右移且留白大。
必须显式重置首段：
-
p:first-of-type { text-indent: 0; margin-top: 0; }—— 最简通用写法 - 若段落包在
.article内，改用.article p:first-child，避免被其他p（如广告位）干扰 - 别依赖“没写就是 0”——浏览器默认样式表里
p没设text-indent，但你自己的 CSS 一旦全局设了text-indent: 2em，首段就必然继承
真正难调的不是数值本身，而是缩进单位在不同字体、不同设备、不同可访问性设置下的连锁反应。盯着 DevTools 的 computed 值看真实像素宽度，比死记“该用 2em 还是 1.8em”管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
