@keyframe不支持阿拉伯语

编程基础网前端问题

2022-01-01

@keyframes doesn#39;t support Arabic(@keyframe不支持阿拉伯语)

本文介绍了@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不支持阿拉伯语的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

编程基础网

本文标题为：@keyframe不支持阿拉伯语

上一篇： CSS动画在一定时间后开始播放

下一篇：仅CSS 3D旋转文本

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX