当前位置：文江博客话题详情

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

发布于 2024-10-20 05:13:40 字数 188 浏览 7 评论 0原文

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

例如，字体 Tahoma 广泛用于阿拉伯文本，但对于具有相同文本大小的英文文本来说，其尺寸非常小。

那么，当我们在阿拉伯语文本中包含一些英语文本时，有没有一种方法可以自动检测文本语言的变化，然后为阿拉伯语文本中的英语文本使用更大的字体大小。

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜无邪 2024-10-27 05:13:40

CSS 没有执行此操作的机制，但您可以通过迭代 JavaScript 中的每个文本节点并不敏感地测试字符 AZ 来试试运气（match(/^[az]+$/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。

从fiddle中可以看到，如果有数字则不匹配 - 你可以通过将正则表达式中的 [az] 更改为 \w。

顺便说一句，如果您想更新包含阿拉伯字符的元素中的英文字符，则需要使用 replace() 并将它们用 span 元素包装，然后在其中添加出现-english。

CSS doesn't have a mechanism to do this, but you could try your luck by iterating over every text node in JavaScript and testing for characters A-Z insensitively (match(/^[a-z]+$/i) (though this doesn't guarantee the text will be English).

If true, you could attach a class to the parent element, something like appears-english and then have CSS like .appears-english { font-size: 120% }.

Update

As per request, here is some code...

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.

You can see from the fiddle it doesn't match if there are numbers - you can make it match numbers, letters and underscore by changing [a-z] in the regex to \w.

BTW, if you want to update English characters within an element that also contains Arabic characters, you will need to use replace() and wrap them with span elements, of which you then add appears-english to.

回复收藏 0 原文

~没有更多了~