使用 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?

推荐答案

堆叠多个 text-shadow 具有 1px 的模糊以模拟实体笔划.添加的阴影越多，您就越接近实体视觉

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屋！