4

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

2 回答 2

5

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

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

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

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

您可以在此处找到有关@media 规则的更多信息。

于 2015-09-04T08:12:30.450 回答
2

而不是声明font-size:.25em使用绝对值，如font-size:xx-small.

于 2012-04-05T10:52:33.617 回答