时间戳

首页 > 解决方案 > 如何使阿拉伯语字体拉伸：在 CSS 中压缩或扩展？

html - 如何使阿拉伯语字体拉伸：在 CSS 中压缩或扩展？

问题描述

我想在我的网站中使用阿拉伯字体，并希望压缩标题但文本没有效果，但是当我使用 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>

标签： htmlcss

解决方案

您需要在<html lang="ar">HTML 中添加以指定语言为阿拉伯语。您还需要使用:lang(ar)伪选择器来定位阿拉伯语文本。此外，font-stretch不适用于每种字体，仅适用于某些字体。您可以在font-stretch 此处(MDN) 或此处(CSS-Tricks) 阅读更多信息。

对于不允许使用的字体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>

推荐阅读