如何用CSS创建打印机友好的页面

原文信息: 查看原文查看原文

How to Create Printer-friendly Pages with CSS

- Craig Buckler

不是所有的页面都需要考虑兼容打印机,这篇文章通览以下通过CSS创建打印机友好的页面的艺术。需要兼容打印机的页面大概有以下几种:

  • 打印旅行或音乐会门票
  • 复印旅途方向或时间表
  • 保存线下阅读的复印件
  • 获取连接不良地区的信息
  • 危险或肮脏地区的有用数据-比如,厨房或工厂
  • 手写注释的草稿内容的输出
  • 记账目的的网略明细的打印
  • 为使用屏幕困难的残疾人提供文档
  • 为拒绝使用新奇的互联网的大学打印文件

不幸的是,打印Web页面是体验很不好:

  • 字体可能很小、很大或很不清晰
  • 列宽或者页面边界可能太窄、太宽
  • 部分内容可能完全被完全剪切或消失掉
  • 墨水被浪费在无用的有颜色的背景和图片
  • 看不到链接的URL
  • 图标,菜单和广告,这些不能被点击的东西都打印出来了

很多开发者会支持Web Accessibility,但是很少能记得让打印的页面支持Accessibility

打印的样式表

针对打印机的CSS可以是以下两种之一:

  1. 应用另外的屏幕样式表。 以屏幕样式为基础,必要的时候,用打印机的样式覆盖默认样式。
  2. 应用单独的样式表。 屏幕样式和打印机样式是完全单独的,都是以浏览器默认样式为准。

文中有详细的打印机样式的书写、测试和调试的方法,建议阅读全文。

分享于 2020-01-28

访问量 1295

预览图片