移动端文字描边与文字填充重叠问题及解决请求

我想在移动端实现文字描边不与白色文字填充色重叠。下图中第一张是移动端效果，第二张是网页端效果，我希望标题文字始终呈现第二张图的样式。

已尝试方案 #

• 尝试了以下设置的所有组合：
  1. 将填充色设为白色
  2. 将填充色设为透明，常规文字颜色设为白色
  3. 不设置填充色，文字颜色设为白色
• 尝试用:after伪元素显示填充色，但未成功实现

HTML #

<h1
  className={`${Styles.minHeightForSymmetry}`}
  // 仅在最小宽度768px时设置min-height为9.7rem
  style={{
    textAlign: "center",
    fontSize: "calc(8px + 1vw)",
    fontFamily: "sans-serif",
    color: "white",
  }}
>
  <span
    style={{
      fontFamily: "sans-serif",
      fontSize: "calc(18px + 1vw)",
      color: "white",
    }}
    className={`${Styles.letterBorder}`}
  >
    Quick Overview of WAR Zone
  </span>{" "}
  <br /> The world&apos;s most fast and efficient match making
  software
</h1>

CSS #

/* 尝试解决描边覆盖白色文字的问题 */
.letterBorder {
  font-weight: bold;
  font-family: Arial, sans-serif;
  -webkit-text-stroke: 2px #000; /* Chrome和Safari适配 */
  text-stroke: 2px #000; /* 其他浏览器适配 */
  -webkit-text-fill-color: white; /* Chrome和Safari适配 */
  text-fill-color: white; /* 其他浏览器适配 */
  text-align: center;
  text-wrap: balance;
  color: transparent; /* 隐藏原始文字颜色 */
}

效果对比 #

• 移动端问题效果：
• 网页端理想效果：

移动端-webkit-text-stroke的渲染逻辑和桌面端存在差异，容易出现描边覆盖填充色的问题。推荐用双层文字叠加的方案实现稳定的跨端描边效果：

1. 调整HTML结构，移除span内的行内样式，新增data-text属性同步文字内容：

<h1
  className={`${Styles.minHeightForSymmetry}`}
  style={{
    textAlign: "center",
    fontSize: "calc(8px + 1vw)",
    fontFamily: "sans-serif",
    color: "white",
  }}
>
  <span 
    className={`${Styles.letterBorder}`}
    data-text="Quick Overview of WAR Zone"
  >
    Quick Overview of WAR Zone
  </span>{" "}
  <br /> The world&apos;s most fast and efficient match making
  software
</h1>

2. 修改CSS，通过伪元素生成底层描边层，原文字作为顶层填充层：

.letterBorder {
  position: relative;
  display: inline-block;
  font-weight: bold;
  font-family: Arial, sans-serif;
  font-size: calc(18px + 1vw);
  color: white;
  text-align: center;
  text-wrap: balance;
}

.letterBorder::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  -webkit-text-stroke: 2px #000;
  text-stroke: 2px #000;
  z-index: -1;
}

这个方案通过分层渲染彻底避免了描边与填充色的重叠问题，在移动端和桌面端都能保持一致的显示效果。

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