@keyframes 不支持阿拉伯语

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 不支持阿拉伯语

@keyframes doesn't support Arabic

html

css

sass

keyframe

css-animations