求助：如何实现带发光效果的空心标题？-webkit-text-stroke效果异常

1. 先排查-webkit-text-stroke的问题点 #

你用这个属性出现字母异常，多半是字体本身的轮廓设计缺陷——有些字体的字符轮廓存在重叠、断点，加上描边后就会显现出变形。可以先做两个测试：

• 换成Inter、Roboto这类轮廓规整的无衬线字体，看看是否还会出现异常
• 把描边宽度调小（比如从2px改成1px），观察效果变化

2. 最通用的替代方案：text-shadow叠加发光 #

这是前端实现文字发光的常用方式，完全不会有描边导致的字符问题，效果也能贴合你的预期：

.glow-heading {
  color: #fff; /* 文字基础色 */
  text-shadow: 
    0 0 4px #fff,
    0 0 8px #fff,
    0 0 12px #FF00FF, /* 替换成你需要的发光主色 */
    0 0 20px #FF00FF;
}

通过多层阴影叠加，调整每层的模糊半径和颜色，就能做出柔和的渐变发光效果，比描边更自然。

3. 精准匹配设计的方案：SVG滤镜发光 #

如果要完全复刻设计稿里的发光效果，SVG滤镜是最佳选择，可控性极强，适配任何字体：

<!-- 先定义SVG滤镜，放在页面任意位置 -->
<svg width="0" height="0" style="position: absolute;">
  <defs>
    <filter id="text-glow">
      <!-- 生成模糊的发光层 -->
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur-layer"/>
      <!-- 叠加发光层和原文字 -->
      <feMerge>
        <feMergeNode in="blur-layer"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
</svg>

<!-- 应用滤镜的标题 -->
<h1 style="filter: url(#text-glow); color: #fff;">YOUR GLOWING HEADING</h1>

你可以调整stdDeviation的值来控制发光的模糊程度，还能添加颜色矩阵滤镜来修改发光颜色，完全匹配设计要求。

4. 分层解决描边+发光的冲突 #

如果必须同时保留描边和发光效果，可以用两层文字分离实现：

<h1 class="title-container">
  <span class="stroke-layer">YOUR GLOWING HEADING</span>
  <span class="glow-layer">YOUR GLOWING HEADING</span>
</h1>

.title-container {
  position: relative;
}
.stroke-layer {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-text-stroke: 1px #fff;
  color: transparent; /* 只显示描边 */
}
.glow-layer {
  text-shadow: 0 0 8px #FF00FF; /* 只显示发光 */
}

这种方式让描边和发光各自独立，不会互相干扰导致字符变形。

另外，检查你项目里的字体加载逻辑，确保字体完全加载完成后再应用样式，也可能解决部分加载导致的显示异常。

内容的提问来源于stack exchange，提问作者Kramar