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

最新推荐文章于 2024-01-25 14:18:50 发布

apensu

最新推荐文章于 2024-01-25 14:18:50 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/apensu/article/details/8862368

版权

上码：

<!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"定义，通过正则式查找替换之。