我想在文本中添加一个大纲,以阿拉伯语显示效果很好。一种可能的解决方案是使用text-stroke
:
body {
background-color: pink;
}
h1 {
color: white;
text-align: center;
-webkit-text-stroke: 1px black;
text-stroke: 1px black;
}
<h1>Experiment</h1>
<h1>تجربة</h1>
这就是它为我呈现的方式:
如您所见,这在英语中效果很好,但在阿拉伯语中效果不佳。在阿拉伯语中,字母经常相互连接,并且轮廓不应出现在连接的字母之间。引用W3:
在添加文本边框时,仅在每个字母形状上添加边框都无法为阿拉伯文字产生正确的结果。加入字母不应通过添加边框与其加入的邻居分开。像透明度一样,避免这种情况的一种方法是将字形路径统一为所有所连接字母的单个大路径,并在该路径周围添加边框。
如何在CSS中获得正确的文本边框?
堆叠许多text-shadow
具有1px
模糊效果的线以模拟实体笔画。添加的阴影越多,获得的视觉效果就越好
body {
background-color: pink;
}
h1 {
color: white;
text-align: center;
text-shadow:
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000,
0 0 1px #000;
}
<h1>Experiment</h1>
<h1>تجربة</h1>
它也适用于任何模糊值:
body {
background-color: pink;
}
h1 {
--s:2px;
color: white;
text-align: center;
text-shadow:
0 0 var(--s) #000,
0 0 var(--s) #000,
0 0 var(--s) #000,
0 0 var(--s) #000,
0 0 var(--s) #000,
0 0 var(--s) #000,
0 0 var(--s) #000,
0 0 var(--s) #000,
0 0 var(--s) #000,
0 0 var(--s) #000,
0 0 var(--s) #000,
0 0 var(--s) #000,
0 0 var(--s) #000;
}
<h1>Experiment</h1>
<h1>تجربة</h1>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句