根本原因是-webkit-text-stroke的px单位在高dpi屏或缩放时无法等比缩放，导致描边变细消失或糊成一团；应改用em单位（如0.06em）、font-size同步用rem/em，并前置text-shadow降级（模糊值为0、整数偏移、四向覆盖），确保对比度≥4.5:1。
为什么移动端文字描边容易“断掉”或“消失”
根本原因是 -webkit-text-stroke 的像素单位（如 2px）在高DPI屏、系统字体缩放或双指放大时无法等比缩放，导致描边变细到不可见，或突然变粗糊成一团。这不是浏览器bug，而是固定像素值在响应式环境中的天然缺陷。
用 em 单位替代 px 控制描边粗细
把描边宽度从绝对单位换成相对单位，让它随 font-size 同步缩放：
-
-webkit-text-stroke: 0.06em #000比1px更稳——16px 字号下≈0.96px，24px 下≈1.44px，视觉比例始终一致 -
font-size必须也用rem或em，不能写16px；否则描边缩放但文字不缩放，比例就崩了 - Android WebView 4.4+ 支持该写法，但部分旧版 X5 内核（如早期 QQ 浏览器）会忽略前缀，需 fallback
text-shadow fallback 必须写在 -webkit-text-stroke 前面
CSS 是顺序覆盖的，位置错了就会在 Chrome 里出现“描边+阴影”双重叠加，视觉臃肿：
h1 {
/* 先写 fallback：Firefox / 老浏览器只看到这个 */
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
/* 再写现代方案：WebKit 浏览器覆盖上面，只渲染描边 */
-webkit-text-stroke: 0.06em #000;
color: #fff; /* 别漏掉填充色，否则文字透明看不见 */
}
- 所有
text-shadow的第三个参数（模糊值）必须是0，否则边缘发虚，不像描边 - 方向要全覆盖：上下左右 + 四个对角，缺一个就会漏边
- 别用
filter: drop-shadow()替代——它作用于整个元素盒，不是文字轮廓，且重绘开销大
深色/浅色背景下的描边可读性翻车点
描边颜色和背景对比度没算准，文字就直接“融掉”：
- 白字 + 浅灰描边（
#ccc）在白色背景上几乎不可见；同理，黑字 + 深灰描边（#333）在深灰背景上也难分辨 - WCAG 要求文字与描边、描边与背景的对比度都 ≥ 4.5:1；可用 WebAIM 对比度检查器 验证
- 暗色模式下，别硬写
#000描边——改用color-scheme: light dark或媒体查询动态切色
最常被忽略的是：描边不是装饰，是可读性补丁。缩放、DPI、系统字体设置、暗色模式——这些变量一个没控住，描边就从“突出文字”变成“藏起文字”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
