您的位置：首页 > Web前端 > CSS

IE7中英文混合文本的字体样式控制问题，使用js解决

2013-04-28 10:56 751 查看

上码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="ext-strict">
<head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
body{font-family: Verdana, 幼圆;}
</style>
</head>
<body>
<div id="content">
<div>
欢迎大家光临，We to may Website. 测试中文，Test English。
</div>
<hr/>
<div style="font-family:'幼圆';">
欢迎大家光临，We to may Website. 测试中文，Test English。
</div>
<hr />
<div style="font-family: Verdana;">
欢迎大家光临，We to may Website. 测试中文，Test English。
</div>
</div>
</body>
</html>

以上代码在ie7和其他浏览器浏览会有区别

IE9、Chrome或FireFox

IE7:

文本是中英混合的，想要使用不同的字体，在IE8以上版本或其他主流浏览器上，css支持这种写法

body{font-family: Verdana, 幼圆;}

但是可惜ie7不给力，就是没有效果。

无奈只能使用js来变通一下了

再上码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="ext-strict">
<head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
body{font-family: Verdana, 幼圆;}
</style>

<style>
span.fontCN{
font-family:"幼圆";
}
</style>

<script src="jquery-1.3.2.min.js" ></script>
<script>
$(document).ready(function(){
alert($.browser.version);
if($.browser.version > 7.0){

}else{
SetFonts();
}
});

function replacCN()
{
if(arguments.length > 0){
　　	return "<span class='fontCN'>" + arguments[0] + "</span>";
}
return "";
}

function SetFonts(){
//中文字体规则
var reg = /[\u4e00-\u9fa5]+/g;
$(".fontCNEN").each(function(){
var content= $(this).text();
//alert(content);
content=content.replace(reg, replacCN); //把中文替换成 <span>中文</span>
//alert(content);
$(this).html(content);
});
}
</script>
</head>
<body>
<div id="content">
<div class="fontCNEN">
欢迎大家光临，We to may Website. 测试中文，Test English。
</div>
<hr/>
<div style="font-family:'幼圆';">
欢迎大家光临，We to may Website. 测试中文，Test English。
</div>
<hr />
<div style="font-family: Verdana;">
欢迎大家光临，We to may Website. 测试中文，Test English。
</div>
</div>
</body>
</html>

主要通过js判断需要判断的文本，使用class ="fontCNEN"定义，通过正则式查找替换之。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航