必须用@media print主动重置打印样式，隐藏非内容元素、调整字体/链接/图片，并通过独立print.css引入，配合@page和真机测试确保输出正确。
用 @media print 区分屏幕和打印样式
浏览器默认会把页面所有样式（包括背景色、浮动、侧边栏）一股脑塞进打印预览，结果常是内容错位、白纸黑块、关键信息被裁掉。必须用 CSS 媒体查询主动拦截并重置。
在 index.html 的 <head> 里加一段 <style> 或引入独立 CSS 文件，核心是：
@media print {
* { margin: 0; padding: 0; }
body { font-size: 12pt; line-height: 1.4; }
.header, .nav, .sidebar, .ads { display: none; }
a { color: #000; text-decoration: none; }
img { max-width: 100%; height: auto; }
}注意：不要只写 display: none 就完事——打印时字体大小、行高、链接颜色都得单独调，否则小字号糊成一片，带下划线的链接在黑白打印机上根本看不清。
print.css 单独引入比内联更可控
把打印样式抽成独立文件，能避免开发时误改、上线后缓存污染，也方便调试（改完直接刷新打印预览，不用清整个页面样式）。
立即学习“前端免费学习笔记（深入）”；
在 index.html 中这样引入：
<link rel="stylesheet" href="print.css" media="print">
关键点：
-
media="print"必须写，漏了就当普通 CSS 加载，影响屏幕渲染 - 不要用
media="screen, print"混合声明，容易让打印样式被屏幕样式覆盖 - 如果项目用构建工具（如 Webpack），确保
print.css不被压缩进主 CSS 包，否则媒体查询可能被错误合并或丢弃
打印时图片和链接要手动“降级”
浏览器对 @media print 的支持很保守：背景图默认不打，position: fixed 元素常被截断，<a href> 默认显示完整 URL（比如 “https://example.com/page”），而不是友好的文字。
常见处理方式：
- 用
img { content: attr(data-print-src) }配合data-print-src属性替换高分辨率图（避免打印时模糊） - 给链接加伪元素：
a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }，但仅限必要场景——太多 URL 会让页面拥挤 - 禁用
background-image：直接写background: none !important;，别依赖浏览器默认行为
测试不能只靠 Ctrl+P，要模拟真实打印机限制
Chrome 打印预览里的 “Destination” 选 “Save as PDF” 看起来完美，但真连激光打印机时可能出问题：A4 宽度只有 595px（非 96dpi 下的像素值），页眉页脚自动加高，某些字体（如思源黑体）没嵌入就变宋体。
验证要点：
- 用
@page设置页边距：@page { margin: 1cm; }，不然不同浏览器默认值差异大 - 打印前检查 computed styles，确认关键元素的
display和visibility确实是none或visible - 禁用所有浏览器扩展（尤其广告屏蔽类），它们可能注入样式干扰
@media print
最麻烦的是字体回退链——你设了 font-family: "Helvetica Neue", Arial, sans-serif，但打印机没装 Helvetica，最终打出来字重、字宽全变，这种问题只能真机打一张试。
