阿拉伯文字阴影问题

问题描述

<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上进行了测试）。好吧，我需要跨越文本，我不认为应该存在差距，无论如何我都可以克服这个问题？

解决方法

另一种选择是使用阴影过滤器，直到笔画起作用为止：

可能的示例：

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>

您好，阿拉伯语中不需要用单独的字母（例如英语）写，因此您需要编写带有阴影的完整句子，例如：

  // 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>

arabic html