text-stroke 仅在 Chrome、Edge、Safari（需 -webkit-text-stroke 前缀）中支持，Firefox 完全不支持且无计划加入；IE 和旧版 Edge 不识别；描边过粗或小字号易发虚锯齿，推荐 ≤2px；SVG 是最稳妥替代方案。
text-stroke 在哪些浏览器里能用
不是所有浏览器都支持 text-stroke，它属于 CSS Text Decoration Level 3 的特性，目前只在带 -webkit- 前缀的 Blink/WebKit 内核中稳定生效（Chrome、Edge、Safari）。Firefox 完全不支持，且没有计划加入——别指望用 text-stroke 做跨浏览器一致的文字描边。
常见错误现象：text-stroke: 2px red; 在 Firefox 里完全无效，文字既没描边也没报错，容易误以为写错了样式。
- 必须加
-webkit-text-stroke，标准写法是-webkit-text-stroke: 2px red; - 可以搭配
color: transparent;实现“空心字”，但要注意 Safari 对transparent渲染略偏暗，实际不是纯透明 - IE 和旧版 Edge（EdgeHTML）完全不识别，连前缀版都不行
描边变粗后文字发虚或锯齿严重
描边宽度超过 1–2px 时，尤其在非 Retina 屏或缩放非 100% 下，文字边缘容易模糊、发虚，甚至出现明显锯齿。这不是 bug，而是浏览器对 -webkit-text-stroke 的光栅化方式导致的：它是在文字轮廓外额外绘制一层描边，没做亚像素抗锯齿优化。
- 优先控制描边宽度 ≤ 2px；3px 是临界点，4px 起基本不可用
- 避免在小字号（≤ 16px）上使用描边，14px 文字配 1px 描边都可能糊成一团
- 不要依赖
transform: scale()拉伸描边文字——会放大模糊，而不是增强清晰度 - 如果必须粗描边，考虑用 SVG
<text>+stroke属性替代，可控性高得多
和 text-shadow 混用时的渲染顺序问题
-webkit-text-stroke 的绘制层级在文字填充色之下、text-shadow 之上。这意味着：如果你同时设了 color: white;、-webkit-text-stroke: 2px black; 和 text-shadow: 2px 2px 2px rgba(0,0,0,0.3);，阴影会盖在描边上，看起来像描边被“压暗”了。
立即学习“前端免费学习笔记（深入）”；
- 想让阴影在描边外层，就别用
text-shadow；描边本身已经提供了轮廓强化效果 - 真要叠加，把
text-shadow改成极细偏移（如0.5px 0.5px 0.5px）+ 极低透明度，否则视觉冲突明显 - 注意：描边不响应
text-shadow的扩散（blur-radius），描边永远是硬边
替代方案：当 text-stroke 不可用或不合适时
Firefox 不支持、描边太粗糊、需要动画或响应式缩放——这些场景下，-webkit-text-stroke 就该果断放弃。最稳妥的 fallback 是 SVG，其次是双层文字模拟（但有可访问性风险）。
- SVG 方案：用
<text stroke="black" stroke-width="2" fill="white">Hello</text>，支持所有浏览器，描边可缩放、可动画、可 aria-label - CSS 双层模拟（慎用）：
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000;，仅适合简单正交描边，斜角处露白、小字号易断 - Web 字体自带描边？别信。所谓“stroke font”只是字形设计含粗外框，不是 CSS 可控的描边行为
描边看着简单，但真正用稳，得先看清浏览器底牌、字号边界和渲染层级——这些地方一松劲，文字就糊了、漏了、或者干脆不见了。
