阿拉伯文本阴影问题

Question

<html>
  <body style="font-size: 36px; background: #4488ff; color:#fff;">
    <div>
      <span>أ</span><span>ظ</span><span>ه</span><span>ر</span><span> </span><span>ا</span><span>ل</span><span>ك</span><span>ل</span>
    </div>
    <div style="text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">
      <span>أ</span><span>ظ</span><span>ه</span><span>ر</span><span> </span><span>ا</span><span>ل</span><span>ك</span><span>ل</span>
    </div>
  </body>
</html>

我注意到跨越的阿拉伯语文本有间隙（在 Chrome\FireFox 上测试过）。好吧，我需要跨越文本，但我认为不应存在间隙，无论如何我可以解决这个问题吗？

Answer 1

你好阿拉伯语不需要像英语那样用单独的字母写，所以你需要用阴影写完整的句子，例如：

  // modified text
<div style="text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; color:#fff">
  أظهر الكل
</div>

Answer 2

另一种选择是使用 drop-shadow 过滤器直到 text-stroke 起作用：

可能的例子：

span:nth-child(3) {
  color: gold;
}

body {
  font-size: 80px;
  background: #4488ff;
  color: #fff;
  margin: auto;
}

html {
  display: flex;
  min-height: 100vh
}

<div style="filter:
drop-shadow(1px 1px 0px #000)  
drop-shadow(-1px -1px 0px #000)
drop-shadow(-1px 1px 0px #000)  
drop-shadow(1px -1px 0px #000)
">
  <span>أ</span><span>ظ</span><span>ه</span><span>ر</span><span> </span><span>ا</span><span>ل</span><span>ك</span><span>ل</span>
</div>

阿拉伯文本阴影问题

Arabic text-shadow trouble

html

css

arabic