如何在CSS中实现仅显示于单个字母外侧的text stroke效果？

CSS 实现方案 #

原生 -webkit-text-stroke 是沿文字路径中心绘制描边，会同时显示内外侧描边。要实现纯外侧描边，可通过双层文字叠加的方式：

.stroke-title {
  position: relative;
  font-size: 48px;
  font-weight: bold;
  /* 上层文字填充色 */
  color: #F45800;
}

.stroke-title::after {
  /* 复用原文字内容 */
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  /* 仅设置描边，填充透明 */
  -webkit-text-stroke: 2px #000000;
  -webkit-text-fill-color: transparent;
  /* 把描边层放在文字下方 */
  z-index: -1;
}

使用时给标题元素添加 data-text 属性（值与文字内容一致）：

<h1 class="stroke-title" data-text="Hello World">Hello World</h1>

原理：伪元素生成的描边层在底层，原文字覆盖中间区域，最终仅露出外侧描边效果，完美匹配需求。

SVG 实现方案 #

Figma 直接导出带描边的文字 SVG 会出现内侧描边，是因为原生 SVG 的 stroke 沿路径中心绘制。正确步骤如下：

1. 文字转曲：在 Figma 选中文字层，右键选择「Convert to Outlines」，将文字转为矢量路径
2. 设置外侧描边：选中转曲后的路径，在右侧面板将「Stroke alignment」设为「Outside」
3. 导出优化：导出 SVG 时，确保勾选「Outline Text」，避免文字被还原为原生 <text> 元素

如果导出后仍有问题，可手动编辑 SVG，通过双层路径实现外侧描边：

<svg width="300" height="80" viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg">
  <!-- 描边层：仅描边，填充透明 -->
  <path d="M25 55 C25 50 20 45 15 45 C10 45 5 50 5 55 C5 60 10 65 15 65 C20 65 25 60 25 55 Z M35 55 L35 35 L55 35 L55 55 L35 55 Z M65 55 C65 50 60 45 55 45 C50 45 45 50 45 55 C45 60 50 65 55 65 C60 65 65 60 65 55 Z" 
        stroke="#000" stroke-width="2" fill="transparent" stroke-linejoin="round"/>
  <!-- 填充层：仅填充，覆盖描边层中间 -->
  <path d="M25 55 C25 50 20 45 15 45 C10 45 5 50 5 55 C5 60 10 65 15 65 C20 65 25 60 25 55 Z M35 55 L35 35 L55 35 L55 55 L35 55 Z M65 55 C65 50 60 45 55 45 C50 45 45 50 45 55 C45 60 50 65 55 65 C60 65 65 60 65 55 Z" 
        fill="#F45800"/>
</svg>

这种方式完全基于矢量路径，描边效果精确可控，适合不需要文字可编辑的场景。

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