使用CSS对阿拉伯文字的轮廓效果 [英] Outline effect to text in Arabic using CSS

问题描述

我想在阿拉伯语上为文本添加轮廓.一种可能的解决方案是使用 text-stroke :

I want to add an outline to text that works well in Arabic. One possible solution is to use 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>

这是它为我呈现的方式:

This is how it renders for me:

如您所见，这在英语中效果很好，但在阿拉伯语中效果不好.在阿拉伯语中，字母经常相互连接，并且轮廓不应出现在所连接的字母之间.引用W3:

As you can see, this works well in English, but not in Arabic. In Arabic, letters are often connected to each other, and the outline should not appear between connected letters. To quote 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中实现此正确的文本边框?

How can I achieve this correct text border in CSS?

推荐答案

堆叠许多具有 1px 模糊度的 text-shadow ，以模拟实体笔触.添加的阴影越多，获得的视觉效果就越好

Stack many text-shadow having 1px of blur to simulate a solid stroke. The more shadow you add the more you get close to a solid visual

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>

它也适用于任何模糊值:

It works also with any value of blur:

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>

这篇关于使用CSS对阿拉伯文字的轮廓效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！