在使用jquery.printarea打印页面，打印出的字体和实际页面字体不一致。
页面显示的字体为宋体：
实际打印的字体为微软雅黑：
【代码如下】：
<!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" />
<link type="text/css" rel="stylesheet" href="css/elements.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/elements.js"></script>
<script type="text/javascript" src="js/jquery.PrintArea.js"></script>
<style type="text/css">
.wt_content{font-family:'宋体';font-size:16px;line-height:45px;font-weight:bold;}
</style>
<script type="text/javascript">
$(function(){
$("#print").click(function(){
$('.wt_content').printArea();
});
});
</script>
</head>
<body>
<div class="container" style="width:850px;">
<div class="wt_content" style="background:#FFF;padding:45px;border:#999 1px solid;box-shadow:1px 2px 4px #000">
<p>打印内容打印内容打印内容</p>
</div>
<input type="button" value="打印" id="print" />
</div>
</body>
</html>【产生原因】：
在使用jquery.printarea.js插件时，该插件会自动生成一个iframe并引用link中的外部样式，但是写在页面上的样式并没有引用。所以上面代码中，设置字体的样式（如下代码）
.wt_content{font-family:'宋体';font-size:16px;line-height:45px;font-weight:bold;}并没有发生作用。
【解决方法】：
将样式写在外部样式表中并引用。
扫一扫
733
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
