-webkit-text-stroke 是 WebKit 专属非标准属性，Chrome、Edge、Safari 支持，Firefox 完全不支持，因其未实现且 Mozilla 暂无计划支持；应优先考虑 text-shadow 模拟或 SVG 的 stroke 属性实现跨浏览器兼容。
text-stroke 在 Chrome 和 Safari 里能用，Firefox 不支持
直接说结论：-webkit-text-stroke 是 WebKit 内核专属的非标准属性，Chrome、Edge（新版）、Safari 都认，但 Firefox 完全忽略它。这不是兼容性“差”的问题，是根本没实现——Mozilla 明确表示暂不计划支持，因为 CSS 文本描边应该走 text-shadow 或未来标准的 paint-order + stroke 组合。
常见错误现象：你在 Chrome 看着好好的描边文字，一开 Firefox 就只剩普通文字，连 warning 都没有。别怀疑代码写错了，是浏览器压根不解析这个声明。
- 使用场景：适合做视觉稿还原、营销页标题强化、图标字体文字描边等「非关键信息」场景
- 参数差异：
-webkit-text-stroke: 2px #000等价于分开写-webkit-text-stroke-width: 2px和-webkit-text-stroke-color: #000，但合写更简洁，且不能只设颜色不设宽度（否则无效） - 性能影响极小，纯渲染层操作，但叠加在
font-smoothing: antialiased上时，某些 macOS Safari 版本会出现描边发虚，建议加-webkit-font-smoothing: subpixel-antialiased缓解
描边变粗或消失？检查 font-size 和 line-height 的隐式缩放
-webkit-text-stroke 的宽度是绝对像素值，不随字号缩放。比如你设了 font-size: 12px 和 -webkit-text-stroke: 1px #000，看起来还行；但换成 font-size: 48px 后，描边还是 1px，就细得快看不见了。反过来，如果字号很小（如 10px），描边设成 2px，可能直接把字“吃掉”——笔画被描边覆盖，只剩空心轮廓。
容易踩的坑：用 rem/em 做响应式字号时，-webkit-text-stroke-width 不会跟着变，必须配合媒体查询或 JS 动态调整。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：描边宽度按字号比例设，例如
font-size: 16px→-webkit-text-stroke: 0.125em #000（即 2px），这样缩放时保持视觉一致 - line-height 过小会导致多行文字描边互相挤压，尤其加了
letter-spacing后更明显，建议描边文字的line-height至少比字号大 1.4 倍 - 不要对
input或button这类表单控件直接套描边，部分浏览器会渲染异常或触发 focus 样式错乱
替代方案：text-shadow 模拟描边更稳妥但有局限
真要全浏览器兼容，text-shadow 是目前最可行的模拟方式，比如用 8 个方向的阴影拼出近似描边效果：
text-shadow:
-1px -1px 0 #000,
0 -1px 0 #000,
1px -1px 0 #000,
-1px 0 0 #000,
1px 0 0 #000,
-1px 1px 0 #000,
0 1px 0 #000,
1px 1px 0 #000;
但它不是描边，是投影，所以本质区别很明显：
- 描边紧贴文字边缘，
text-shadow有偏移和模糊半径，即使设0模糊，8 个方向也拼不严，小字号下能看到缝隙 - 无法单独控制“内描边”或“外描边”，
-webkit-text-stroke默认就是紧贴路径的，而text-shadow只能往外投 - 性能上，8 个阴影比单个
-webkit-text-stroke开销大，滚动或动画中可能掉帧，特别是低端安卓 WebView
SVG text 元素里用 stroke 属性才是真正的描边
如果你控制的是 SVG 内容，别折腾 CSS，直接用 SVG 原生能力：<text stroke="#000" stroke-width="2" fill="#fff">Hello</text>。这里的 stroke 是矢量描边，支持 stroke-linejoin、stroke-miterlimit 等精细控制，且所有现代浏览器都支持。
但注意：SVG text 的排版行为和 HTML 文本不同，换行、断字、字体回退都要手动处理，不适合长段落。它适合图标文字、数据可视化标签、或者需要精确路径描边的场景。
- fill 和 stroke 颜色都设时，顺序很重要：先描边再填色，所以
fill覆盖在stroke上面；若想“空心字”，把fill设为none - 中文字符在某些字体下 SVG 渲染可能偏移，建议加
dominant-baseline="middle"和text-anchor="middle"对齐 - 不要把大量动态文本塞进 SVG，DOM 节点过多会影响性能，尤其是频繁重绘时
