我有一个包含日志报告的HTML文件.我想以较小的文字大小打印该报告.我尝试使用下面的css样式,但文本大小没有改变.怎么解决这个问题.
<HTML>
<HEAD>
<TITLE>Events</TITLE>
<STYLE type="text/css">
table, th, td
{
border: 1px solid #cccccc;
border-collapse:collapse;
padding: 5px;
}
</STYLE>
<STYLE type="text/css" media="screen">
#eventText {
display: block; overflow-y: auto; height: 600px;
width: auto; left: 0px; top: 50px; font-size: 0.25em;
}
#eventButtons { display: block; }
</STYLE>
<STYLE type="text/css" media="print">
body { margin: 0; background-image: none; font-size: 0.25em }
#eventText {
display: block;
overflow-y: visible;
height: auto;
margin:0;
font-family: geneva, arial, helvetica, sans-serif;
font-size: xx-small;
}
#eventButtons { display: none; }
</STYLE>
</HEAD>
<BODY>
<div id="eventButtons">
<INPUT TYPE="BUTTON" VALUE="View" onclick="javascript:loadValues();">
<INPUT TYPE="BUTTON" VALUE="Print" onclick="javascript:window.print();">
</div>
<div id="eventText"> </div>
</BODY>
</HTML>
您的确切解决方案是在CSS中使用@media规则
您可以设置CSS以在网页尝试打印时更改元素的样式.以下CSS将在打印时将所有DIV元素中的背景颜色设置为白色.
@media print{
div{
background-color: #FFFFFF;
}
}
您可以通过这种方式轻松设置所选元素的字体,尽管您可以使用它做更多的事情.
您可以在此处找到有关@media规则的更多信息.