猿吟鹤唳本无意,不知下有行人行

同一段文本中,英文和汉字调用不同class样式

感谢东鳞西爪、Sevencity、Homelink、LeXRus。

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

 

解决方式有两个。css方法和js方法

一、css方法

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

body{

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

}

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

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

二、使用js实现

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

<style>

.cn{font-size:12px;font-family:宋体;}

body{font-size:9px;font-family:verdana;}

</style>

<script >

function xsize(xstr){
return xstr.replace(/([u0391-uFFE5]+)/ig,"<font class="cn">$1</font>");}

</script>

<body onload="bb.innerHTML=xsize(bb.innerHTML)" id="bb">

–Qui est ce? –C'est LeXRus. –Est ce que c'est LeXRus? –Que, c'est LeXRus..<br/>
–这是谁? –这是来克斯露斯~ –这是来克斯露斯? –是的, 这是来克斯露斯~

</body>

如下效果

*需要注意的是,若文本中有图片,图片不能写width、height、alt,不然也会在js下把其中的数字汉字执行转换,变成乱码。只要图片的长宽合适,不用定义,在各浏览器中也没问题。

发表评论

您的电子邮箱地址不会被公开。