答案：用-webkit-text-stroke实现空心字必须搭配color: transparent，仅设描边会导致文字变粗黑；最小生效组合为color: transparent与-webkit-text-stroke: 1.5px #fff同时指定，中文字体描边建议≤1.5px以防粘连。
用 -webkit-text-stroke 实现空心字必须配 color: transparent
只写 -webkit-text-stroke: 2px #000，文字会变粗黑，不是空心——因为描边叠在默认填充色上。真正生效的最小组合是：
-
color: transparent（硬性前提，不能用opacity: 0替代，否则描边也消失） -
-webkit-text-stroke: 1.5px #fff（宽度和颜色必须同时指定，缺一不可） -
text-stroke: 1.5px #fff（无前缀版补全，Safari ≤16.3 不认它，Firefox ≥119+ 可能只认它）
中文字体建议描边 ≤1.5px，否则笔画粘连；英文/数字可放宽到 2px。搭配 font-weight: 700 能提升清晰度。
text-shadow 模拟描边时要写满 8 个方向
当 -webkit-text-stroke 在 Firefox 或旧 Safari 中失效，text-shadow 是最兼容的降级方案。但只写 text-shadow: 1px 1px 0 #000 会漏边，必须覆盖全部 8 个方向：
-
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（左下）
模糊值（第三个参数）必须为 0，否则边缘发虚；颜色需与背景反差足够，否则“空心”不明显。
立即学习“前端免费学习笔记（深入）”；
Canvas 里做真·空心字：只调 strokeText()，别碰 fillText()
HTML/CSS 的“空心”本质是视觉欺骗，Canvas 才能真正控制渲染逻辑。关键点：
- 先设
ctx.strokeStyle和ctx.lineWidth，再调strokeText("text", x, y) - 完全跳过
fillText()，否则变成“描边+填充”，不是镂空 - 加
ctx.lineJoin = "round"和ctx.lineCap = "round"，避免小字号转角炸毛 - 中文小字号（≤24px）慎用 >2px 描边，易糊成块
注意：y 是基线位置，不是顶部；若文字偏高或偏低，需手动调整 y 值。
复杂背景下的空心字必须用 SVG 或 Canvas
纯色背景可用 CSS 技巧，但遇到渐变、图片、视频背景时，所有基于 color: transparent 的方案都会失效——因为“透明”只是透出父容器背景，无法透出动态内容。
- SVG 方案：用
<text>元素 +stroke属性，配合fill="none"，完全可控且跨浏览器 - Canvas 方案：用
globalCompositeOperation = "destination-out"在底图上“抠”出文字形状，适合动效或复杂合成 - 别用伪元素双层叠加：破坏屏幕阅读器识别，且无法选中文本
真正难的不是怎么画空心，而是怎么让空心在各种背景下都“看得清、读得懂、不崩坏”。浏览器支持断层、中文字形粘连、高清屏缩放失真——这些坑，一个没绕开，UI 就会来找你喝茶。
