感谢东鳞西爪、Sevencity、Homelink、LeXRus。
需求:要求所有文本中,汉字使用微软雅黑,阿拉伯数字和英语使用Arial。(文本中有好多的编号数字和部分英语)
解决方式有两个,css方法和js方法。
一、css方法:
先定义一个英文字体再定义中文字体,这是因为英文字体中一般不含有中文,执行的时候英文和阿拉伯数字选用“Arial”,中文的字体使用第二个字体“微软雅黑”。比如,可以这样来定义WordPress中的中英文字体:
body{
font-family: Arial,"微软雅黑";
}
*需要注意的是,这样的做法对符合网页规范的浏览器比如Firefox虽然有效,但对IE6、IE7会导致中文字体设定无效,也就是说,这样的办法对于微软的IE系列来说等于不设置中文字体,而只是采用系统默认的“宋体”来显示网页内容。
也可以指定两个class分别分配给中文和英文内容,这样就可以对IE也实现如上的字体效果,并可以为中英文的显示进行更详细的定制(比如字号等属性),但缺点是这样的做法比较繁杂,使用上不太方便,特别是对博客这样的中英文混编的文章内容来说更是麻烦。
二、使用js实现
当然也能用JavaScript+Css来实现这个效果,实现方式可以参考经典论坛上的相关帖子:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>无标题文档</title>
- </head>
- <style>
- .cn{font-size:12px;font-family:宋体;}
- body{font-family:"Comic Sans MS";}
- </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">
- --hello~
曾经某国留学生到米国旅游,遇到某事故,然后翻车在里面等待救援。<br/>
- --米国某人看到问其:"how are you?"<br />
- --某国留学生说:"oh~ i'm fine?and you?"~<br />
- --米国某人说:"oh~fine too"然后走了<br />
- </body>
- </html>