如何解决阿拉伯文字阴影问题
<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。