<p>-webkit-text-stroke 是 WebKit/Blink 专属属性，Firefox 74+ 支持标准 text-stroke，Safari 仍仅支持 -webkit- 前缀；IE/Edge18- 完全不支持，需 SVG/canvas 降级；描边与填充叠加显示，纯描边需设 color: transparent；描边宽度无自动缩放，须按字号/字重手动调整；Chrome macOS 可能因 subpixel 渲染导致模糊，可尝试 -webkit-font-smoothing: antialiased 或优化色差。</p>
text-stroke 在 Chrome/Firefox/Safari 中的兼容性差异
-webkit-text-stroke 是 WebKit/Blink 内核专属属性，Firefox 从 74 版本起支持标准语法 text-stroke（无需前缀），但 Safari 目前仍只认 -webkit-text-stroke。这意味着：不加前缀在 Safari 和旧版 Chrome 里直接失效。
实际项目中必须同时写两遍：
h1 {
-webkit-text-stroke: 2px #ff6b6b;
text-stroke: 2px #ff6b6b;
}
注意：IE 全系、Edge 18 及更早版本完全不支持，连降级方案都没有——如果需要兼容这些环境，得用 SVG 文字或 canvas 模拟，不能指望 CSS。
描边和文字颜色重叠时的显示逻辑
描边是“画在文字轮廓线上”的，它不会自动遮盖文字填充色；color 和 -webkit-text-stroke 同时存在时，最终效果 = 描边 + 填充叠加。常见错误是设了粗描边却忘了把文字填充设为透明，结果看起来像一团糊。
立即学习“前端免费学习笔记（深入）”；
正确做法是显式控制填充：
- 要纯描边无填充：加
color: transparent - 要描边+浅色文字：比如
color: #fff+-webkit-text-stroke: 1px #000 - 别依赖默认
color值，尤其在继承上下文里容易意外覆盖
font-weight 和 font-size 对描边视觉宽度的影响
-webkit-text-stroke 的宽度是绝对像素值，但它在不同字号或字重下视觉占比差异极大。12px 字号下设 2px 描边会吞掉大半字形，而 48px 字号下可能 barely visible。
没有自动缩放机制，必须手动调：
- 小字号（≤16px）建议描边 ≤1px，否则锯齿明显、可读性崩坏
- 大标题（≥32px）可用 2–4px，但需搭配
font-weight: bold避免细笔画被吃掉 - 避免在
font-weight: 100或thin字体上用 >1px 描边——细线条+粗描边=边缘毛刺
描边导致文字模糊或抗锯齿异常
部分 Chrome 版本（尤其是 macOS 上）开启硬件加速后，-webkit-text-stroke 会触发 subpixel 渲染问题，文字边缘发虚、出现灰边。这不是 bug，是描边叠加渲染路径带来的副作用。
缓解方式有限，优先试这两个：
- 加
-webkit-font-smoothing: antialiased强制走灰阶抗锯齿（对中文效果较明显） - 避免描边色和背景色对比过低，比如
#000描边配#333背景，容易让描边“融”进背景里
真要追求锐利边缘，目前没完美解法——描边本质是图形绘制层叠，不是字体轮廓重绘。能接受就用，不能接受就得换 SVG 或图片方案。
