打印时调整字体大小

时间:2016-04-11 01:09:58

标签: javascript html css

当我要打印时,如何调整文字的字体大小?我试图设置字体大小属性,但是当我点击打印按钮时它没有被使用,它将恢复到默认的字体大小。

            function print1(strid)
    {

    var values = document.getElementById(strid);
    var printing =window.open("");
    printing.document.write(values.innerHTML);
    printing.document.close();
    printing.focus();
    printing.print();
    printing.close();

    }


<div id="print2">
Ex : My data table 1
</div>

<input type="button" value="Print" onclick="return print1('print2')">

1 个答案:

答案 0 :(得分:4)

您可以使用CSS媒体查询。在样式部分中添加类似以下内容的内容,以增加整个主体的字体大小。你可以使用任何其他CSS选择器而不是body,所以对于你的div使用#print2。

<style type="text/css">
  @media print {
    body {  
      font-size: large;
    }
  }
</style>

<head>标记后将其添加到HTML文档中。 当然,您可以在块中设置任何其他CSS属性。

这是一个完整的例子:

<!doctype html>
<html>
<head>
<style type="text/css">

    body {
        font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
        font-size: 12pt;
    }

    @media print {
        body {  
          font-size: 48pt;
        }
    }

</style>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>

This is a sample document with normal size text that should print large.

</body>
</html>