-webkit-text-stroke必须配合color: transparent才能显示描边，否则被实色填充覆盖；它仅WebKit内核支持，Firefox完全不兼容，推荐优先使用8方向text-shadow兜底并用@supports检测覆盖。
-webkit-text-stroke 必须配 color: transparent 才能显空心效果
直接写 -webkit-text-stroke: 2px #000 却不改 color，结果就是“没描边”——因为默认 color: black（或继承色）会完全盖住描边。描边是绘制在文字轮廓上，不是外挂边框；它天然位于填充色之上，但视觉上会被实色填充“吃掉”边缘。
-
color: transparent是实现空心字的必要条件，不是可选项 - Safari 对
transparent渲染略偏灰（尤其小字号），不是纯透，可微调描边颜色补偿（比如用#000改为#111） - 别用
-webkit-text-fill-color: transparent替代color: transparent：后者更稳定，前者在部分旧 Safari 中有兼容问题 - 如果同时需要描边 + 填充色（非空心），就别设
color: transparent，而是用实色搭配描边，例如color: white; -webkit-text-stroke: 1.5px #000
@supports 检测必须带 -webkit- 前缀，否则永远失败
写 @supports (text-stroke: 1px #000) 是无效的——这个无前缀属性根本不存在，所有浏览器都会返回 false。正确检测方式是问浏览器：“你支不支持我真正要写的那条声明？”
- 正确写法：
@supports (-webkit-text-stroke: 1px #000)，Chrome/Safari/新版 Edge 返回 true，Firefox 直接跳过 - 推荐结构：先写
text-shadow版本作为兜底；再用@supports块覆盖，里面启用-webkit-text-stroke并清空text-shadow - 不要用 UA 判断或 JS 检测内核——
@supports是能力检测，更轻量、更可靠、不阻塞渲染
text-shadow 模拟空心描边时，8 方向比 4 方向更可靠
只写上下左右 4 个方向的 text-shadow（如 -1px 0 0 #000, 1px 0 0 #000），会在字母斜线连接处（如 “W”、“X”、“N”）露白，形成断点。这不是 bug，是阴影叠加的几何局限。
- 最小可用组合是 8 方向：
text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 - 所有偏移量必须是整数像素（
±1px或±2px），blur-radius必须为0，否则变虚边 - 小字号（≤16px）下，8 方向开销可忽略；大标题（≥32px）建议坚持 8 方向，避免视觉割裂
描边宽度超过 2px 就容易发虚或锯齿，尤其在非 Retina 屏或缩放非 100% 时
这不是配置错误，而是浏览器光栅化机制限制：-webkit-text-stroke 在文字轮廓外额外绘制一层，缺乏亚像素抗锯齿优化。一旦描边变粗，边缘糊、毛、断的问题就会浮现。
- 安全宽度：≤1.5px（推荐）｜临界点：2px｜慎用：3px｜基本不可用：≥4px
- 旧版 Safari（如 iOS 15.2）会对小数像素（如
1.5px）四舍五入，导致描边消失，优先用整数（1px或2px） - 真要粗描边、渐变描边、或需动画控制？直接切 SVG：
xxx
空心描边最难的不是写法，而是判断什么时候不该用它——当项目必须兼容 Firefox、需要响应式缩放、或文字尺寸小于 18px 时，text-shadow 模拟仍是更稳的选择；而一旦涉及图标字体、动态文字或高保真输出，SVG 就不该被绕开。
