使用CSS对阿拉伯文字的轮廓效果

问题描述

我想在阿拉伯语上为文本添加轮廓。一种可能的解决方案是使用text-stroke：

body {
  background-color: pink;
  }
h1 {
  color: white;
  text-align: center;
  -webkit-text-stroke: 1px black;
  text-stroke: 1px black;
}

<h1>Experiment</h1>
<h1>تجربة</h1>

这是它为我呈现的方式：

如您所见，这在英语中效果很好，但在阿拉伯语中效果不佳。在阿拉伯语中，字母通常彼此连接，并且轮廓不应出现在连接的字母之间。引用W3：

在添加文本边框时，仅在每个字母形状上添加边框都无法为阿拉伯文字生成正确的结果。加入字母不应通过添加边框与其加入的邻居分开。像透明度一样，避免这种情况的一种方法是将字形路径统一为所有所连接字母的单个大路径，并在该路径周围添加边框。

如何在CSS中实现此正确的文本边框？

解决方法

堆叠许多text-shadow具有1px的模糊度以模拟实体笔画。添加的阴影越多，获得的视觉效果就越好

body {
  background-color: pink;
}

h1 {
  color: white;
  text-align: center;
  text-shadow: 
   0 0 1px #000,0 0 1px #000,0 0 1px #000;
}

<h1>Experiment</h1>
<h1>تجربة</h1>

它也适用于任何模糊值：

body {
  background-color: pink;
}

h1 {
  --s:2px;
  color: white;
  text-align: center;
  text-shadow: 
   0 0 var(--s) #000,0 0 var(--s) #000,0 0 var(--s) #000;
}

<h1>Experiment</h1>
<h1>تجربة</h1>