阿拉伯语文本阴影问题 [英] Arabic text-shadow trouble
本文介绍了阿拉伯语文本阴影问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<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 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>
</html>
我注意到跨越的阿拉伯语文本有间隙(在 Chrome\FireFox 上测试).嗯，我需要跨越文本，我认为不应该存在差距，无论如何我可以克服这个问题?
解决方案
另一种选择是使用阴影过滤器，直到文本笔画有效:
可能的例子:
span:nth-child(3) {颜色:金色；}身体 {字体大小:80px；背景:#4488ff；颜色:#fff;保证金:自动；}html {显示:弹性；最小高度:100vh}<div style="filter:阴影(1px 1px 0px #000)阴影(-1px -1px 0px #000)阴影(-1px 1px 0px #000)阴影(1px -1px 0px #000)><span>أ</span><span>ظ</span><span>ه</span><span>ر</span><span></span><span>ا</span><span>ل</span><span>ك</span><span></span><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>
I've noticed that spanned Arabic text have gaps (tested on Chrome\FireFox). Well, I need text to be spanned and I don't think that gaps should exist, anyway I could overcome the issue?
解决方案
Another option would be to use drop-shadow filter untill text-stroke works :
possible example:
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>
这篇关于阿拉伯语文本阴影问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
