有没有办法根据语言使用 CSS 来设置文本样式?
例如,Tahoma 字体广泛用于阿拉伯文本,但对于具有相同文本大小的英文文本,其大小非常小。
因此,当我们在阿拉伯语文本中包含一些英文文本时,有没有一种方法可以自动检测文本语言的变化,然后为包含阿拉伯语的英文文本使用更大的字体。
谢谢。
最佳答案
CSS 没有执行此操作的机制,但您可以通过遍历 JavaScript 中的每个文本节点并不敏感地测试字符 A-Z 来试试运气(match(/^[a-z]+$/i)
(尽管这不能保证文本将是 < em>英语).
如果为 true,您可以将一个类附加到父元素,类似于 appears-english
然后像 .appears-english { font-size: 120% }
这样的 CSS .
更新
根据要求,这里有一些代码......
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 .
你可以从fiddle中看到如果有数字它就不匹配——你可以通过changing [a-z]
in the regex to \w
让它匹配数字、字母和下划线| .
顺便说一句,如果你想更新一个包含阿拉伯字符的元素中的英文字符,你需要使用replace()
。并用 span
包裹它们元素,然后添加 appears-english
到。
关于javascript - 根据不同的语言更改元素的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5149786/