-webkit-text-stroke实现空心文字必须配合color: transparent，否则默认填充色会覆盖描边导致加粗实心效果；需双写带前缀与无前缀版本以兼顾safari≤16.3和firefox≥119+，且firefox完全不支持该属性，须用8方向text-shadow兜底。
-webkit-text-stroke 能实现空心文字，但只写它没用——必须配 color: transparent，且 Firefox 完全不认，Safari ≤16.3 只吃带前缀的版本。
为什么只写 -webkit-text-stroke 看不到空心效果
描边本身不控制填充，它只是在文字轮廓上画线。如果 color 没设成 transparent，默认黑色（或继承色）会把描边完全盖住，结果是加粗实心字，不是空心。
- 常见错误：
-webkit-text-stroke: 2px #000单独使用 → 实际渲染为黑粗字 - 另一个常见错误：
color: transparent写了，但漏掉-webkit-text-stroke→ 文字彻底消失（无填充、无描边） - 别用
opacity: 0替代color: transparent：那会让整个元素（含描边）都不可见
-webkit-text-stroke 的写法与兼容性陷阱
必须双写：先带前缀，再写无前缀标准版；否则旧 Safari 或新版 Firefox 会跳过整条规则。
- 正确写法：
-webkit-text-stroke: 1.5px #fff;+text-stroke: 1.5px #fff; - 错误写法：
text-stroke: 1.5px #fff;单独出现 → Safari ≤16.3 直接忽略 -
@supports检测必须带前缀：@supports (-webkit-text-stroke: 1px #000)，写@supports (text-stroke: ...)永远返回 false - 描边值必须完整：
-webkit-text-stroke: 1.5px或-webkit-text-stroke: #000都会被浏览器丢弃
中英文空心字的描边宽度怎么选
描边太粗会导致小字号文字笔画粘连，尤其对中文影响明显；太细则在高 DPI 屏上容易糊边。
- 中文字体建议 ≤1.5px，搭配
font-weight: 700提升清晰度 - 英文/数字可放宽到 2px，但
font-size小于 24px 时仍建议 ≤1.5px - Safari 对
color: transparent渲染略偏灰（非纯透），小字号可用#111替代#000微调对比 - 避免和
text-shadow混用：描边本身已是轮廓，叠加阴影会让边缘变重、发虚
没有 -webkit-text-stroke 支持时怎么办
Firefox 和部分旧 Edge 用户看不到空心效果，得靠 text-shadow 模拟兜底。
- 用 8 方向
text-shadow（上下左右 + 四个对角）比 4 方向更均匀，减少缺口 - 示例：
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版本；再用@supports (-webkit-text-stroke: 1px #000)块覆盖，里面启用描边并清空text-shadow - 别用 UA 判断或 JS 检测内核——
@supports是能力检测，更轻量、不阻塞渲染
真正难的不是写两行 CSS，而是判断哪些用户根本看不到这个效果，以及怎么让 fallback 不显得廉价。描边宽度、字体粗细、背景对比度，三者稍一失衡，空心字就变成毛边字或隐形字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
