Question

我有一个包含日志报告的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>

Answer 1

您的确切解决方案是在CSS中使用@media规则

您可以设置CSS以在网页尝试打印时更改元素的样式。以下CSS将在打印时将所有DIV元素中的背景颜色设置为白色。

@media print{    
    div{
        background-color: #FFFFFF;
    }
}

您可以通过这种方式轻松设置所选元素的字体，尽管您可以使用它做更多的事情。

您可以找到有关@media rules here的更多信息。

Answer 2

而不是声明font-size:.25em使用像font-size:xx-small这样的绝对值。

在CSS中更改打印文本大小

2 个答案: