webkit-text-stroke阿拉伯语文本描边裁切异常 多层阴影实现问题

-webkit-text-stroke 描边裁切是Webkit内核的已知渲染缺陷：该属性的描边会沿字形轮廓向内外两侧各扩展一半宽度，而阿拉伯语使用的延长连接符（tatweel字符 ـ）本身字形边界和字符em框完全重合，向外扩展的描边没有预留渲染空间，就会被直接裁切；如果同时设置了负字间距，字符渲染空间被进一步压缩，裁切问题会更明显。
另外原生 -webkit-text-stroke 是半内半外描边，本身就和纯外描边的预期效果存在差异。

采用双层文本叠加实现，从根源避开渲染bug，同时可以完美实现纯外描边+多层阴影效果：

• 底层文本：专门渲染描边和多层阴影，预留足够内边距给描边、阴影提供渲染空间，避免裁切
• 上层文本：与底层文本内容、排版完全一致，只渲染文字填充色，覆盖在描边层上方，遮挡向内延伸的描边，最终呈现纯外描边效果

实现代码 #

HTML结构 #

<div class="arabic-text-wrap">
  <!-- 描边阴影层，加aria-hidden避免屏幕阅读器重复朗读 -->
  <span class="text-stroke-layer" aria-hidden="true">ملاعــــــب</span>
  <!-- 文字填充层 -->
  <span class="text-fill-layer">ملاعــــــب</span>
</div>

CSS样式 #

.arabic-text-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* 内边距值 ≥ 描边宽度 + 阴影最大偏移量，预留足够渲染空间 */
  padding: 4px 8px;
  font-family: 'DIN Next LT Arabic';
  font-style: normal;
  font-weight: 500;
  font-size: 48px;
  line-height: 71px;
  letter-spacing: -0.02em;
  text-align: right;
  /* 显式指定阿拉伯语排版方向，避免错位 */
  direction: rtl;
}

/* 描边+阴影底层 */
.text-stroke-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 8px;
  /* 描边宽度设为目标值的2倍，上层填充会遮挡一半向内的描边 */
  -webkit-text-stroke: 4px #2A34BF;
  /* 多层阴影按从最底层到最上层的顺序书写，偏移量越大越靠前 */
  text-shadow:
    3px 3px 0px #D6F46B,
    2px 1.3px 0px #E34D32;
  color: transparent;
  user-select: none;
}

/* 文字填充上层 */
.text-fill-layer {
  position: relative;
  z-index: 1;
  padding: 4px 8px;
  color: #FFFFFF;
}

调优说明 #

• 如果需要调整描边粗细，只需要同步修改.text-stroke-layer的-webkit-text-stroke-width为目标外描边宽度的2倍即可
• 多层阴影可以直接在text-shadow属性后追加参数，每层阴影用逗号分隔，按从下到上的层级排列即可实现叠层效果
• 容器内边距可以根据实际描边宽度、阴影偏移量调整，确保描边和阴影不会碰到容器边界即可完全解决裁切问题

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