必须为link标签添加media="print"属性，否则打印预览时不会加载该样式表；推荐使用独立print.css文件并通过引入，兼顾调试可暂用media="screen,print"。
link标签里必须写media="print"
不加这个属性，浏览器根本不会在打印预览时加载这张样式表。很多人写了css">就以为完事了，结果打印出来还是屏幕样式——因为默认media是all，而打印时只认media="print"或media="screen,print"这类明确包含print的值。
实操建议：
- 用
<link rel="stylesheet" href="print.css" media="print">，最干净直接 - 如果想兼顾开发时在浏览器里调试（比如用DevTools切到print模式），可以写
media="screen,print"，但上线前建议改回print，避免无谓的HTTP请求 - 不要用
@import在普通CSS里导入print样式——它在print媒体下不一定被解析，兼容性差，Chrome和Safari都曾有bug
@media print {} 写在主CSS里行不行
行，但容易失控。把print规则塞进main.css，看似省事，实际会污染开发环境：每次改样式都要盯着是否影响打印，CSS体积也悄悄变大。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 用
@media print { display: none; }隐藏某个元素，结果在屏幕模式下也意外失效（因为CSS优先级或!important冲突） - 字体、字号、颜色等print专用设置，在开发者工具里“强制print模式”时看着正常，但真用Ctrl+P打印PDF时却没生效——原因常是@media块被其他规则覆盖，或用了不支持的CSS特性（比如flex在旧版Edge打印中会崩）
实操建议：
- 优先用独立
print.css+media="print"link，职责清晰，调试隔离 - 如果必须合并在主CSS里，把
@media print块放在文件末尾，并用!important兜底关键声明（如color: #000 !important;），但别滥用
打印样式里display: none; 的坑
这是最常用也最容易翻车的操作。比如想隐藏导航栏、侧边栏，写nav, .sidebar { display: none; }，结果页脚错位、内容被截断——因为display: none会完全移除元素的盒模型，导致后续元素上移，而打印分页器对剩余空间的计算就乱了。
使用场景判断：
- 纯装饰性元素（图标、背景图、广告位）：放心用
display: none - 结构性容器（如
<header></header>、<aside></aside>）：优先考虑visibility: hidden+height: 0+overflow: hidden组合，保留占位，避免重排 - 需要彻底移除且不影响布局的，用
position: absolute; left: -9999px;比display: none更稳妥（尤其对表格、Flex容器内元素）
字体、尺寸、链接这些细节怎么处理
打印不是屏幕渲染，很多CSS行为会“降级”。比如系统字体在PDF里可能变成默认衬线体；相对单位em在分页时容易失准；超链接不加处理就只剩文字，用户无法知道原网址。
实操建议：
- 字体统一用
font-family: "Times New Roman", serif;，兼容性最好，避免无字体回退 - 字号用
pt（如12pt）比px或rem更可靠，因为打印引擎对pt的解析最稳定 - 给链接加
::after伪元素显示URL：a::after { content: " (" attr(href) ")"; font-size: 10pt; color: #666; }，但注意要加white-space: nowrap;防换行截断 - 禁用背景色和图片：
* { background: transparent !important; }，否则有些打印机默认不打背景，造成内容不可读
复杂点在于分页控制——page-break-inside: avoid在表格行或卡片组件上经常失效，得配合break-inside: avoid（新标准）双写，而且Firefox和WebKit实现仍有差异。真遇到内容被硬生生从中间劈开，只能手动加<div style="page-break-before: always;"></div>干预。
