Question

我有一张在屏幕上看起来很漂亮的桌子，但是我希望在打印时（并且只在它打印时）将其更改为固定宽度的字体。

e.g。

<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;
   }
}

在打印过程中更改字体

3 个答案: