如何使用CSS为文字添加纯外侧粗描边且不改变文字原有粗细

实现纯外侧文字粗描边的两种方案 #

你之前的方案存在两个核心问题：

• -webkit-text-stroke默认是居中描边，一半宽度覆盖文字填充区域，直接使用会导致原文字视觉变细
• 4方向的text-shadow仅适合实现1px级别的细描边，加粗后会出现明显的棱角缺口，无法形成均匀的粗描边效果

方案1：使用paint-order属性实现（推荐，写法最简） #

通过调整描边和填充的渲染顺序，让文字填充覆盖掉内侧的描边，仅保留外侧部分，完美满足需求，主流现代浏览器均支持该属性。

p {
  font-size: 24px;
  color: #fff; /* 文字本身的填充色 */
  -webkit-text-stroke: 10px #844733; /* 描边宽度和颜色 */
  paint-order: stroke fill; /* 先渲染描边，再渲染填充，填充自动覆盖内侧描边 */
}

HTML无需修改，和你原有代码一致：

<p>my text</p>

方案2：伪元素叠加实现（兼容性更好） #

如果需要兼容老旧浏览器，可以用伪元素承载描边层，放在原文字下方，原文字填充完全不受描边影响。

p {
  position: relative;
  font-size: 24px;
  color: #fff;
  z-index: 1;
}
p::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-text-stroke: 10px #844733;
  color: transparent;
}

HTML需要给元素加data-text属性同步文字内容：

<p data-text="my text">my text</p>

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