html - 在打印期间更改字体

Question

我有一张在屏幕上看起来不错的表格，但我想在打印时（且仅在打印时）将其更改为固定宽度的字体。

例如

<table class='style'>
<tr><th>etc</th></tr>
</table>

然后

.style{
        font-family: "Courier New";
        font-size: 10pt;
    }

我怎样才能得到它，所以 css 类标签只影响打印样式。我只有一个样式表，所以不能有单独的@media 打印表。

Answer 1

您是否尝试过print在样式表中添加媒体查询，并在其中插入新的样式规则？

@media print {
    .style{
        font-family: "Courier New";
        font-size: 10pt;
    }
}

Answer 2

您已经回答了自己的问题，如果您不需要单独的打印样式表，则需要重新声明打印块

@media print {
  element.class {
     font-family: "Courier New";
     font-size: 10pt;
  }
  /* You can add additional styles here which you need */
}

/* The styles between @print braces will be applied when you print the document */

@print注意：当用户打印文档时，将考虑您在块内使用的选择器，其余未声明的规则将从您的正常样式中提取

Answer 3

您可以在一个 CSS 文件本身中同时提及这两种样式。像这样

@media screen
{
    .style{
        font-family: "Courier New";
        font-size: 10pt;
    }
}

@media print
{
   .style{
       font-family: "Helvetica";
       font-size: 12pt;
   }
}