CSSの印刷テキストサイズを変更する

ログレポートを含むHTMLファイルがあります。私はそのレポートをより小さなテキストサイズで印刷したいと思います。私は以下のCSSスタイルで試しましたが、テキストサイズは変更されませんでした。これを解決する方法。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>

出典

2012-04-05 Riskhan

（印刷モードだけでなく）そのスタイルをページに入れてみて、firebugやdevツールでテキストを見て、他のクラスがそのfont-sizeを上書きしていないかどうか確認してください。あるいは '！important'を使って何が起こるかを見てみましょう:-) – Gatekeeper

私のために働きます。どのブラウザを使ってテストしましたか、継承されたフォントサイズは0.25ですか？おそらく、 "5pt"のような "物理的な"フォントサイズを使うほうが良いでしょう。 –

あなたは、media = "all"、またはメディアが定義されていない状態で、他のスタイルを定義またはロードしていますか？ – fcalderan

あなたの厳密解は、Webページを印刷しようとするときは、要素のスタイルを変更するためにCSSを設定することができCSS

で@mediaルールを使用することです。次のCSSは、印刷時にすべてのDIV要素の背景色を白に設定します。

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

あなたはそれをはるかに行うことができますが、あなたは簡単にお好みの要素のフォントをこのように設定することができます。

@mediaルールの詳細については、hereをご覧ください。

出典

2015-09-04 08:12:30

むしろよりfont-size:.25emがfont-size:xx-smallような絶対値を使用して宣言します。

出典

2012-04-05 10:52:33 Marcel

CSSの印刷テキストサイズを変更する

答えて

関連する問題