Html 在 CSS 中更改打印文本大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10027125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change printing text size in CSS
提问by Riskhan
I have a HTML file which contains a log report. I want to print that report in a smaller text size. I tried with below css style, but text size was not changed. How to solve this.
我有一个包含日志报告的 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>
回答by Charlie
Your exact solution is to use @media rule in CSS
您的确切解决方案是在 CSS 中使用 @media 规则
You can set the CSS to change the styles of elements when the web page tries to print. The following CSS will set the background color to white in all the DIV elements when printing.
您可以设置 CSS 以在网页尝试打印时更改元素的样式。以下 CSS 将在打印时将所有 DIV 元素中的背景颜色设置为白色。
@media print{
div{
background-color: #FFFFFF;
}
}
You can easily set the fonts of the elements of your choice this way although you can do much more with it.
您可以通过这种方式轻松设置所选元素的字体，尽管您可以使用它做更多事情。
You can find more about @media rules here.
您可以在此处找到有关 @media 规则的更多信息。
回答by Marcel
Rather than declare font-size:.25emuse an absolute value like font-size:xx-small.
而不是声明font-size:.25em使用绝对值，如font-size:xx-small.
