Question

我尝试用@keyframes用阿拉伯语写一个句子，但是@keyframes不支持阿拉伯语，并且带有难以理解的字符

.caption { background-color: black; }

.caption h1::after {
  animation: move 3s infinite;
  content: "";
  border-left: 1px solid #fff;
  color: #fff !important;
}

@keyframes move {
  0% {
    content: "م"
  }
  10% {
    content: "مر"
  }
  20% {
    content: "مرح"
  }
  30% {
    content: "مرحب"
  }
  100% {
    content: "مرحباً"
  }
}

<div class="caption">
  <h1></h1>
</div>

类似于=-＆++＃@

的字母和符号

Answer 1

对于阿拉伯语，在带有阿拉伯字符的标记元素上包括属性dir="rtl"和lang="ar"：

h1::after {
  content: "مرح";
}

示例1：

<h1>Testing Arabic</h1>

这会错误地显示字符（在Chrome上似乎可以，但是在Safari和Firefox中无法显示）。

示例2：

<h1 dir="rtl" lang="ar">Testing Arabic</h1>

此渲染正确！

此外，您可以在此处阅读有关设置“ content”属性动画的问题的更多信息：https://css-tricks.com/animating-the-content-property/

您还可以在自己的<head></head>标签<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

中添加

@keyframes不支持阿拉伯语

1 个答案: