[技巧] <wbr>同一段文本中,英文和汉字调用不同class样式

感谢东鳞西爪、SevencityHomelinkLeXRus

需求:要求所有文本中,汉字使用微软雅黑,阿拉伯数字和英语使用Arial。(文本中有好多的编号数字和部分英语)

解决方式有两个,css方法和js方法。
一、css方法
先定义一个英文字体再定义中文字体,这是因为英文字体中一般不含有中文,执行的时候英文和阿拉伯数字选用“Arial”,中文的字体使用第二个字体微软雅黑。比如,可以这样来定义WordPress中的中英文字体:

body{

    font-family: Arial,"微软雅黑";

}

*需要注意的是,这样的做法对符合网页规范的浏览器比如Firefox虽然有效,但对IE6IE7会导致中文字体设定无效,也就是说,这样的办法对于微软的IE系列来说等于不设置中文字体,而只是采用系统默认的宋体来显示网页内容。

也可以指定两个class分别分配给中文和英文内容,这样就可以对IE也实现如上的字体效果,并可以为中英文的显示进行更详细的定制(比如字号等属性),但缺点是这样的做法比较繁杂,使用上不太方便,特别是对博客这样的中英文混编的文章内容来说更是麻烦。

二、使用js实现

当然也能用JavaScript+Css来实现这个效果,实现方式可以参考经典论坛上的相关帖子:

 

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>无标题文档</title>
    6. </head>
    7. <style>
    8. .cn{font-size:12px;font-family:宋体;}
    9. body{font-family:"Comic Sans MS";}
    10. </style>
    11. <script >
    12. function xsize(xstr){return xstr.replace(/([\u0391-\uFFE5]+)/ig,"<font class=\"cn\">$1<\/font>");}
    13. </script>
    14. <body onload="bb.innerHTML=xsize(bb.innerHTML)" id="bb">
    15. --hello~ 曾经某国留学生到米国旅游,遇到某事故,然后翻车在里面等待救援。<br/>
    16. --米国某人看到问其:"how are you?"<br />
    17. --某国留学生说:"oh~ i'm fine?and you?"~<br />
    18. --米国某人说:"oh~fine too"然后走了<br />
    19. </body>
    20. </html>
posted on 2013-04-01 09:59  李东振  阅读(342)  评论(0编辑  收藏  举报