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ルールを使用することです

Webページが印刷しようとしたときに要素のスタイルを変更するように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 に答える