为屏幕和打印介质设计页面 - 字体大小

时间:2011-07-12 15:14:52

标签: css printing font-size

我创建了一个显示在屏幕上的报告,它也应该是可打印的。该应用程序也必须支持IE 6.0。

我应该使用哪种字体?

我读过,我应该使用em用于屏幕媒体(网页)和pt用于打印媒体(我知道它们是可扩展的,而pt不是......)。

您如何根据css元素设计这样的页面?

e.g。为打印媒体创建一个单独的css文件,并在那里复制所有的css类,只修改字体大小?如此多的重复。

有没有更好的方法?

由于

2 个答案:

答案 0 :(得分:1)

您不需要复制那么多。

为网络创建报告。

然后,在样式表的正文中添加一个打印样式的引用,如此

@media print {
div#content {background:#fff; width:90%; font-family:serif; font-size:12px;}
div#header, div#insideheader, div#topnav, div#footer, 
div#navcontainer, p.pic img {display:none;}
div#main {border:none; background:none;}
a {color:black;}
}

在上面的例子中,我是

  1. background-color设置为white并扩展内容以填充页面大部分内容的width
  2. 删除大部分额外的内容,例如navfooter,额外的图片等。
  3. 更改链接颜色
  4. 将字体设置为serif font,更易于阅读以进行打印,大小为12px,这非常标准。

答案 1 :(得分:1)

如果您将第一个样式表标记为media all,而第二个样式表是media media,则第二个样式表将有效地成为扩展名,并且第一个样式表将首先用于打印介质。喜欢用于屏幕的打印和ems点。

请查看本文,了解您可能没有想过的其他内容。

http://www.alistapart.com/articles/goingtoprint/