如何在CSS的content属性和@keyframes中正确显示阿拉伯语文本

• 第一步：在你的CSS文件最顶部第一行添加编码声明：@charset "UTF-8";，该声明会告知浏览器以UTF-8编码解析CSS文件内的所有字符，仅设置HTML的meta charset不作用于单独引入的CSS文件。
• 第二步：确认你的CSS文件保存时的编码格式为UTF-8，部分编辑器默认会以GBK、ASCII等编码存储文件，会导致特殊字符编码错乱。
• 第三步：如果直接写入阿拉伯语仍有问题，可以将字符替换为Unicode转义序列，سلام对应的转义写法为\0633\0644\0627\0645，写入content属性时写法如下：content: '\0633\0644\0627\0645';，转义序列不会受编码环境影响，兼容性最好。
• 第四步：补充指定支持阿拉伯语的字体，避免因字体无对应字符导致显示为方块乱码，示例：font-family: 'Noto Naskh Arabic', Tahoma, Arial, sans-serif;

完整修改后的代码示例 #

@charset "UTF-8";

@keyframes lang {
  20% {
    content: 'سلام'; /* 也可替换为转义后的 '\0633\0644\0627\0645' 获得更高兼容性 */
    font-size: 450px;
    font-family: 'Noto Naskh Arabic', Tahoma, Arial, sans-serif;
  }
}

注意：如果是直接写在HTML文件内的style标签中，请确保<meta charset="UTF-8">声明在标签的最靠前位置，早于所有style、script标签加载，测试前清理浏览器缓存避免旧样式影响。

内容的提问来源于stack exchange，提问作者Hunain Ahmed