使用 CSS 对阿拉伯语文本进行轮廓效果

Question

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

\n

\r\n

\r\n

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

\r\n

<h1>Experiment</h1>\n<h1>\xd8\xaa\xd8\xac\xd8\xb1\xd8\xa8\xd8\xa9</h1>

\r\n

\r\n

\r\n

\n

这就是它为我呈现的方式：

\n

\n

正如您所看到的，这在英语中效果很好，但在阿拉伯语中则不然。在阿拉伯语中，字母经常相互连接，并且连接的字母之间不应出现轮廓。引用W3的话：

\n

\n

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

\n

\n

\n

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

\n

Answer 1

堆叠许多text-shadow模糊1px来模拟实体笔画。添加的阴影越多，就越接近立体视觉效果

\n

\r\n

\r\n

body {\n  background-color: pink;\n}\n\nh1 {\n  color: white;\n  text-align: center;\n  text-shadow: \n   0 0 1px #000, \n   0 0 1px #000, \n   0 0 1px #000, \n   0 0 1px #000, \n   0 0 1px #000, \n   0 0 1px #000, \n   0 0 1px #000, \n   0 0 1px #000, \n   0 0 1px #000, \n   0 0 1px #000, \n   0 0 1px #000, \n   0 0 1px #000, \n   0 0 1px #000;\n}

\r\n

<h1>Experiment</h1>\n<h1>\xd8\xaa\xd8\xac\xd8\xb1\xd8\xa8\xd8\xa9</h1>

\r\n

\r\n

\r\n

\n

它也适用于任何模糊值：

\n

\r\n

\r\n

body {\n  background-color: pink;\n}\n\nh1 {\n  --s:2px;\n  color: white;\n  text-align: center;\n  text-shadow: \n   0 0 var(--s) #000, \n   0 0 var(--s) #000, \n   0 0 var(--s) #000, \n   0 0 var(--s) #000, \n   0 0 var(--s) #000, \n   0 0 var(--s) #000, \n   0 0 var(--s) #000, \n   0 0 var(--s) #000, \n   0 0 var(--s) #000, \n   0 0 var(--s) #000, \n   0 0 var(--s) #000, \n   0 0 var(--s) #000, \n   0 0 var(--s) #000;\n}

\r\n

<h1>Experiment</h1>\n<h1>\xd8\xaa\xd8\xac\xd8\xb1\xd8\xa8\xd8\xa9</h1>

\r\n

\r\n

\r\n

\n