如何使用CSS实现阿拉伯语文本的正确连贯描边效果？

Ah, this is such a tricky but important issue with Arabic script and CSS text styling! Let’s break down why your current approach isn’t working, and the best ways to fix it.

Why -webkit-text-stroke Fails for Arabic #

As you noted (and the W3 spec confirms), CSS’s native text-stroke applies stroke to individual glyphs. Arabic relies heavily on connected ligatures—where multiple letters merge into a single visual shape—but under the hood, each letter still has its own glyph boundary. This means the stroke ends up drawing inside those connected areas, creating unwanted gaps or lines between ligated characters, which ruins the smooth flow of the script.

The Reliable Solution: SVG Text #

SVG handles text stroke differently than CSS—it renders stroke based on the entire connected contour of the text block, not individual glyphs. This perfectly aligns with the W3 spec’s recommendation of merging ligated paths before adding a border.

Here’s a working example that handles both English and Arabic correctly:

<svg width="100%" height="120" xmlns="http://www.w3.org/2000/svg">
  <style>
    .styled-text {
      font-size: 48px;
      font-family: Arial, sans-serif; /* Use a font that supports Arabic ligatures! */
      fill: white;
      stroke: black;
      stroke-width: 1px;
      text-anchor: middle;
    }
  </style>
  <!-- English text -->
  <text x="50%" y="50" class="styled-text">Experiment</text>
  <!-- Arabic text -->
  <text x="50%" y="110" class="styled-text">تجربة</text>
</svg>

You can embed this SVG directly in your HTML, or use it as an inline element alongside your other content. Just make sure to use a font that properly supports Arabic ligatures (like Noto Sans Arabic, Arial Unicode MS, or system fonts that handle Arabic well) to ensure the ligatures form correctly in the first place.

A Quick (But Imperfect) CSS Workaround #

If you need a pure CSS workaround without SVG, you can simulate a stroke using multiple drop-shadow filters. It’s not a true stroke, but it can work for simple cases:

body { background-color: pink; }
h1 {
  color: white;
  text-align: center;
  font-size: 48px;
}
h1.arabic {
  /* Simulate 1px black stroke with stacked drop shadows */
  filter: 
    drop-shadow(1px 0 0 black)
    drop-shadow(-1px 0 0 black)
    drop-shadow(0 1px 0 black)
    drop-shadow(0 -1px 0 black);
}

Note that this creates a fuzzy, shadow-like effect rather than a sharp stroke, and it won’t handle complex ligatures as cleanly as the SVG method.

Key Takeaway #

For proper, spec-aligned stroke on Arabic text, SVG is the way to go. It treats connected ligatures as a single continuous shape, so the stroke wraps around the entire text block without breaking the ligatures.

内容的提问来源于stack exchange，提问作者Flimm