本文介绍了@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">
这篇关于@keyframe不支持阿拉伯语的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！