针对不同语言更改元素的CSS样式

Question

有没有办法使用CSS根据语言来设置文本样式？

例如，字体Tahoma在阿拉伯文本中被广泛使用，但是当使用相同的文本大小时，英文文本的大小非常小。

因此，当我们在阿拉伯文本中有一些英文文本时，是否有办法自动检测文本语言的变化，然后使用更大的字体大小来显示英文文本？

谢谢。

- MohamedKadri

---

最好添加JavaScript标签。 - DrStrangeLove

在什么情境下？是在输入框中编写内容还是显示来自服务器的内容？ - yoda

谢谢两个答案，但我真的没有明白重点 :( - MohamedKadri

Answer 1

CSS没有这样的机制，但你可以尝试使用JavaScript迭代每个文本节点，并对大小写不敏感的A-Z字符进行测试（match(/^[a-z]+$/i)）（尽管这并不能保证文本是英语）。

如果是真的，你可以给父元素附加一个类，比如appears-english，然后像这样使用CSS：.appears-english { font-size: 120% }。

更新

根据要求，以下是一些代码...

JavaScript

var divs = document.getElementsByTagName('div');

for (var i = 0, divsLength = divs.length; i < divsLength; i++) {
  var div = divs[i];

    if (div.firstChild.nodeValue.match(/^[a-z]+$/)) {
       div.className += 'appears-english';
    }  

}

CSS

.appears-english {
   font-size: 170%;  
}

jsFiddle中的代码无法匹配数字，你可以通过将正则表达式中的[a-z]改为\w来匹配数字、字母和下划线。

另外，如果你想更新包含阿拉伯字符的元素中的英文字符，你需要使用replace()并用span元素包裹它们，然后添加appears-english类名。

- alex

---

谢谢你的回答，Alex。不一定非要用英语，只要使用英文字母就可以了。我认为这样可以完成工作，但你能给我一个示例代码吗？谢谢。 - MohamedKadri

@MohamedKadri 当然可以，是否有任何库存在，例如jQuery？ - alex

@MohamedKadri 那是开始编程的最佳时机 :) - alex

是的，我知道，但我必须在早上去付ADSL的费用，并且还有其他事情要做，但我真的想留下来，因为现在没有人会打扰我。请问另一个问题，这是如何工作的？它会重新设置每个单独的字符，还是将所有字符放入DIV中以便即时设置样式？ - MohamedKadri

@MohamedKadri 太棒了，完成后给我发封电子邮件，我总是很喜欢看到我的插件在运行中的样子。 - alex