使用 CSS 对阿拉伯语文本的轮廓效果
Outline effect to text in Arabic using CSS
我想为阿拉伯语文本添加大纲。一种可能的解决方案是使用 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:
When adding text border, simply adding a border to each letter shape fails to produce the proper result for the Arabic script. A joined letter should not be separated from its joined neighbors by adding border. Like transparency, a way to avoid this is to unify glyph paths into a single big path for all the letters that are joined and add border around that path.
如何在 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>
我想为阿拉伯语文本添加大纲。一种可能的解决方案是使用 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:
When adding text border, simply adding a border to each letter shape fails to produce the proper result for the Arabic script. A joined letter should not be separated from its joined neighbors by adding border. Like transparency, a way to avoid this is to unify glyph paths into a single big path for all the letters that are joined and add border around that path.
如何在 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>