Question

我想在我的网站中使用阿拉伯字体，并且希望压缩标题，但文本中没有效果，但是当我使用Arial等英语字体时，CSS可以有效地压缩字符。

请帮助我压缩阿拉伯字体。

.heading{ font-size: 60px; text-align: center; color: maroon; font-weight: bolder; font-family: 'Segoe UI'; font-stretch: ultra-expanded }

  <div class="heading">هذا ڪتاب</div>

Answer 1

您需要在HTML中添加<html lang="ar">，以指定该语言为阿拉伯语。您还需要使用:lang(ar)伪选择器来定位阿拉伯语文本。另外，font-stretch并非适用于所有字体，仅适用于某些字体。您可以详细了解font-stretch here（MDN）或here（CSS技巧）。

对于不允许font-stretch的字体，您可以通过使用正letter-spacing扩展单词，或使用负letter-spacing压缩单词来解决。

下面是一个使用letter-spacing: 30px扩展文本的示例：

.heading:lang(ar) { 
  font-size: 60px;
  text-align: center;
  color: maroon;
  font-weight: bolder;
  font-family: 'Segoe UI';
  font-stretch: ultra-expanded;
  letter-spacing: 30px;
}

<html lang="ar">
<p class="heading">هذا ڪتاب</p>

下面是一个用letter-spacing: -5px压缩文本的示例：

.heading:lang(ar) { 
  font-size: 60px;
  text-align: center;
  color: maroon;
  font-weight: bolder;
  font-family: 'Segoe UI';
  font-stretch: ultra-expanded;
  letter-spacing: -5px;
}

<html lang="ar">
<p class="heading">هذا ڪتاب</p>

如何制作阿拉伯字体拉伸：在CSS中压缩或扩展？

1 个答案: