是唯一正确写法，media值必须全小写、无空格、带英文双引号；写错即不加载，print.css须独立文件且不套@media print；验证需用window.print()或devtools模拟print媒体。

link 标签的 media="print" 必须写对才生效

写错就等于没写——media 值必须是全小写、无空格、带英文双引号的 "print"。常见错误包括：media="PRINT"、media=" print"、media="screen, print"，甚至漏掉 media 属性本身。这些都会导致浏览器压根不加载 print.css，更别说应用样式了。

正确写法只有一种：<link rel="stylesheet" href="print.css" media="print">。它必须放在 顶部，不能包裹在 <noscript></noscript> 里，也不能由 JavaScript 动态插入——浏览器在构建打印布局前已锁定样式表列表。

print.css 文件必须独立且不套 @media print

把打印规则塞进主 CSS 里的 @media print { } 块，看着省事，实则埋雷：构建工具可能压缩丢弃、缓存更新不同步、通用规则层叠覆盖打印规则。真正可靠的做法是新建一个纯文本文件 print.css，里面只写打印专用规则，**不要加任何 @media print 包裹**。

• print.css 路径需相对于 HTML 文件，比如 href="css/print.css"
• 确保构建配置（Webpack/Vite）不把它合并进 main.css
• 避免用 @import 在 screen.css 中引入它——Safari 和旧 Edge 会直接跳过

打印样式里哪些 CSS 写法容易被忽略或失效

浏览器在打印模式下会主动重置很多属性，不是“桌面样式加个 media 就能跑通”。比如：background-image 默认被禁用、color 强制变黑、float 元素被折叠。你得主动覆盖：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• 用 color: #000 + background: #fff 显式声明文字与底色
• 隐藏非内容区块推荐 position: absolute; left: -9999px;，比 display: none 更稳妥（某些 PDF 驱动会跳过整块）
• 链接要可见：写 a[href]::after { content: " (" attr(href) ")"; }
• 字体单位优先用 pt（如 font-size: 12pt），不用 rem、% 或 px——DPI 不稳定，缩放不可控

怎么验证 print.css 真正起作用了

别只盯着打印预览界面右上角那个“打印”按钮——那是快照，不一定反映真实输出。最可靠的验证方式是：在控制台执行 window.print()，此时浏览器强制应用所有 media="print" 样式，比点击菜单更严格。

调试时注意：

• 普通浏览状态下，DevTools 的 Styles 面板里根本看不到 print.css 规则，这是正常行为
• 打开 DevTools → Rendering → Emulate CSS media: print 可模拟效果，但 @page 规则（如页边距、A4 尺寸）不会触发，必须真打出来看
• Network 面板过滤 print.css：如果页面一加载就发起请求，说明 media 值写错了；正确行为是只在调用 window.print() 或打开打印预览时才加载

最容易被忽略的是加载时机和缓存：Chrome 打印预览会缓存 CSS 解析结果，仅刷新页面无效，必须在打印预览窗口中按 Ctrl+Shift+R（Windows）或 Cmd+Shift+R（macOS）强制重载。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！