@keyframe不支持阿拉伯语

2022-03-10 00:00:00 html css sass css-animations keyframe

我尝试用@keyframe用阿拉伯语写句子，但@keyframe不支持阿拉伯语，结果出现难以识别的字符

.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>

类似于=-&；++#@的字母和符号

解决方案

阿拉伯语在带有阿拉伯字符的标签元素上包含属性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">

相关文章