打印版CSS生成器 - 网页转打印友好

✅ CSS已复制到剪贴板

打印版CSS生成器

将网页内容转换为打印友好的样式 — 实时预览，一键生成 @media print CSS 代码

HTML 源代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>示例文章</title></head>
<body>
  <nav class="navbar" style="background:#333;color:#fff;padding:10px;">导航栏 | 首页 | 关于 | 联系</nav>
  <div class="container" style="display:flex;gap:20px;padding:20px;">
    <main style="flex:3;">
      <article>
        <h1 style="color:#1a1a2e;">如何优化网页打印体验</h1>
        <p style="line-height:1.8;">在Web开发中，打印样式的优化常常被忽视。通过使用 <strong>@media print</strong> 规则，我们可以为打印创建专门的CSS样式，隐藏不必要的元素（如导航栏、侧边栏、广告），调整字体和排版，确保打印输出清晰易读。</p>
        <p style="line-height:1.8;">良好的打印CSS不仅能提升用户体验，还能节省纸张和墨水。本文介绍了打印CSS的最佳实践，包括页面边距设置、字体选择、以及如何处理链接和图片。</p>
        <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Crect fill='%23e2e8f0' width='400' height='200'/%3E%3Ctext x='200' y='105' text-anchor='middle' fill='%2394a3b8' font-size='16'%3E示例图片%3C/text%3E%3C/svg%3E" alt="示例图片" style="max-width:100%;border-radius:8px;">
        <h2>关键要点</h2>
        <ul><li>使用 @media print 包裹打印样式</li><li>隐藏导航、侧边栏等非内容元素</li><li>调整字体为适合打印的衬线字体</li><li>设置合适的页面边距</li></ul>
      </article>
    </main>
    <aside class="sidebar" style="flex:1;background:#f1f5f9;padding:15px;border-radius:8px;">
      <h4>相关文章</h4><ul><li>CSS基础教程</li><li>响应式设计指南</li><li>Web性能优化</li></ul>
      <div class="ad" style="background:#fef3c7;padding:10px;border-radius:6px;margin-top:10px;">📢 广告位</div>
    </aside>
  </div>
  <footer style="background:#f8fafc;padding:15px;text-align:center;border-top:1px solid #e2e8f0;">© 2024 示例网站 | 社交分享 | 友情链接</footer>
</body>
</html>

⚠️ 受浏览器跨域策略限制，部分URL可能无法直接获取。如遇失败请使用"粘贴HTML"方式。

快速加载示例：

打印设置

快速预设：

页面尺寸

页边距

字体大小

字体类型

移除背景色/图片

显示链接URL

隐藏所有图片

使用单列布局

移除阴影/装饰

隐藏元素选择器（逗号分隔）：

点击快速添加：

nav .sidebar aside footer .ad .social .comments header .breadcrumb .cookie-banner

打印预览 (模拟纸张效果)

生成的打印CSS — 可直接复制使用

常见问题与打印CSS知识点

@media print 是CSS中的媒体查询规则，专门用于定义网页在打印时的样式。当用户通过浏览器打印网页（Ctrl+P）时，@media print 中定义的样式会自动生效。它可以用来：隐藏不需要打印的元素（导航栏、侧边栏、广告等）、调整字体和颜色以适合纸张、优化页面布局、设置分页符位置。使用 @media print 可以显著提升打印输出的质量和可读性，同时节省墨水/碳粉。

@page 规则用于定义打印页面的尺寸和边距。常用属性包括：size: A4; 设置页面尺寸（支持A4/A3/A5/letter等）；margin: 20mm; 设置页面边距；@page :first { ... } 单独设置首页样式；@page :left { ... } 和 @page :right { ... } 分别设置左右页（用于双面打印）。注意：@page 规则在屏幕预览中不可见，只在实际打印时生效。建议使用毫米(mm)或英寸(in)作为单位。

通常需要隐藏的元素包括：导航栏（nav, .navbar）、侧边栏（.sidebar, aside）、页脚（footer，除非包含重要信息）、广告（.ad, .ads, .advertisement）、社交分享按钮（.social, .share）、评论区（.comments）、相关文章推荐（.related-posts）、面包屑导航（.breadcrumb）、Cookie弹窗、视频和音频播放器。隐藏方式使用 display: none !important; 确保优先级足够高。

使用CSS伪元素可以自动在链接后显示URL：
a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
这会在每个链接后面自动添加括号中的URL地址。如果只想对外部链接显示URL，可以使用：
a[href^="http"]::after { content: " (" attr(href) ")"; }
这样可以过滤掉内部锚点链接。此外，对于过长的URL，可以使用 word-break: break-all; 防止溢出。

CSS提供了三个分页控制属性：
page-break-before: always; — 在元素前强制分页
page-break-after: always; — 在元素后强制分页
page-break-inside: avoid; — 避免元素内部被分页（如表格、图片、标题不应被分割）
常见用法：给每个 <h2> 标题前加分页符；给 <table>、<figure>、<pre> 设置 page-break-inside: avoid; 防止内容被截断。现代CSS也支持 break-before、break-after、break-inside 属性。

主要原因有三点：1. 节省墨水/碳粉 — 大面积的背景色会消耗大量墨水，尤其是深色背景；2. 提升可读性 — 白底黑字是印刷品的最佳阅读组合，彩色背景在黑白打印时可能变成难以辨认的灰色块；3. 减少干扰 — 阴影、渐变等装饰效果在纸张上无法完美呈现，反而会让内容显得模糊。推荐在打印CSS中设置：
body { background: #fff !important; color: #000 !important; }
* { box-shadow: none !important; text-shadow: none !important; }

调试打印样式有几种方法：1. 浏览器打印预览 — 按Ctrl+P（Mac: Cmd+P）打开打印对话框，可以看到实际打印效果；2. Chrome DevTools — 打开开发者工具，点击"更多选项"→"More tools"→"Rendering"，在"Emulate CSS media type"中选择"print"，即可在屏幕上模拟打印样式；3. 使用本工具 — 在预览iframe中查看模拟的打印效果，实时调整设置。建议在开发过程中结合以上多种方法进行调试。

打印推荐使用衬线字体（Serif），如 Georgia、Times New Roman、宋体等。衬线字体在印刷品上的可读性通常优于无衬线字体。推荐的字体栈：
font-family: Georgia, 'Times New Roman', '宋体', serif;
字体大小建议设置在11pt-13pt之间，正文通常使用12pt。标题可以适当增大。同时建议设置 line-height: 1.5; 到 1.7; 以提升可读性。避免使用web字体（如Google Fonts），因为它们可能无法在打印时正确加载。

最新

竖排文本布局器 - CSS writing-mode

输入文本，预览从右至左竖排效果，并调节行间距和悬挂字符，输出CSS代码。

前端设计 CSS 排版竖排

文字渐现效果生成器 - 逐字透明显现动画

让文字从左到右或随机逐渐显现，生成对应的CSS animation代码和HTML结构。

前端设计 CSS 文字动画渐现

首字下沉生成器 - 段落首个大字CSS代码

调整下沉字母的大小、行高和颜色，生成对应的CSS ::first-letter 代码。

前端设计 CSS 生成首字下沉

最新

像素字体在线设计器 - 按网格绘制字符集

在放大网格上逐点绘制字母与符号，生成像素字体文件（.ttf预览）及CSS代码片段。

字体位图像素字体编辑器设计

终端打字效果生成 - 类似黑客屏幕

生成逐行显示的终端风格文本动画，带有光标闪烁，营造黑客氛围。

前端设计动画打字终端

文字阴影生成器 - CSS Text-Shadow在线生成

在线CSS文字阴影效果生成器，通过滑块调整阴影属性，即时预览文字多层阴影效果，复制CSS代码。

前端设计 CSS 文字阴影生成器

HTML实体编码解码工具 - 在线转义工具

在线HTML实体编码与解码工具，实现特殊字符与HTML实体的相互转换，防止XSS及显示问题。

开发工具 HTML 实体编码解码

CSS Grid布局生成器 - 在线栅格代码生成

可视化CSS Grid布局生成工具，拖拽划分行列、设置间距和对齐方式，自动生成Grid容器及子项CSS代码。

前端设计 CSS Grid 布局生成器

网页字体检测器 - 列出当前页面所有字体

扫描当前页面使用的所有字体栈，并展示实际渲染字体名及样例。

开发工具字体检测网页

HTML压缩工具 - 在线精简HTML代码

清除HTML中的多余空格、注释和换行，移除可选标签，有效减少文件体积。

优化工具 HTML 优化压缩

最新

整版条码打印纸生成 - 多排标签填满A4

输入产品列表，自动排版为A4不干胶标签格式，直接打印。

办公工具打印排版条码标签

Web安全字体展示 - 各系统预装字体预览

预览所有主流系统预装的Web安全字体，并显示对应的font-family名称。

前端设计字体安全预览

打字机效果生成器 - 逐字显示动画JS代码

输入文字设定打字速度和光标样式，生成逼真的打字机逐字显示动画HTML/JS代码。

前端设计 JS 动画打字机

文字转SVG路径 - 字体轮廓提取

输入文字，选择系统字体，将每个字符的轮廓转换为SVG path数据。

开发工具 SVG 文字路径

HTML格式化工具 - 在线HTML代码美化/压缩

在线HTML代码格式化与压缩工具，可对HTML进行缩进美化、压缩混淆，提升可读性并保持结构完整。

前端设计 HTML 压缩格式化美化

HTML实体批量编码 - 完整字符集处理

将整个文本中的非ASCII字符全部转换为HTML数字或命名实体。

开发工具 HTML实体批量编码

最新

HTML Input 类型全览演示 - 每个type实时渲染

列出从text到color的所有input type，旁边实时展示控件的原生渲染，表单开发参考。

HTML input 演示类型表单

本地字体预览器 - 加载系统字体列表

通过Local Font Access API读取已安装字体，输入文字实时预览各种字体效果。

前端设计字体本地预览

书法格子纸生成器 - 楷书/行书专用

生成带米字格、回宫格或信笺行的练字纸张，自定义颜色和间距，直接打印。

教育工具书法打印格子

HTML输入类型大全 - 所有type现场演示

展示所有HTML input type（text, password, date, color等）的渲染效果。

前端设计 input 演示类型

最新

OpenType特性预览器 - 连字/小型大写等

输入文字，切换开启连字(liga)、小型大写(c2sc)等OpenType特性，观察渲染差异。

前端设计 OpenType 字体预览

缎带横幅CSS生成器 - 角落促销标签

设计用于网站角落的缎带促销标签，可改色和文字，输出HTML/CSS代码。

前端设计 CSS 生成缎带

最新

网页动效时间轴编辑器 - 类似 AE 的关键帧动画

在时间轴上管理多个元素的动画关键帧，可视化调整缓动，导出为 CSS/JS 动画。

动画关键帧动效时间轴编辑器

课程表在线生成器 - 可视化排课与打印

通过拖拽课程块填充每周课表，自定义颜色与时间，支持打印清晰小课表。

教育工具打印排课课程表课表

书写练习纸生成 - 带范字描红

输入需要练习的汉字或英文单词，生成含虚线的描红练习纸。

教育工具书写打印练习纸

在线文本差异对比工具 - 代码/文档差异比较

在线比较两段文本或代码的差异，高亮显示增删改行，适用于代码审查和版本比对。

开发工具 diff 差异文本对比

最新

论文大纲生成器 - 论点论据结构化辅助

输入主题与主要观点，自动生成引言-正文-结论的基本框架，辅助构思。

写作写作大纲结构论文

按键代码查看器 - JavaScript KeyCode在线检测

按下键盘任意键，实时显示对应JavaScript键盘事件的key、keyCode、code等信息，方便开发调试。

开发工具 KeyCode 按键检测

最新

网站易读性检查器 - 长句/被动语态排查

粘贴文章，高亮过长句子与被动语态，给出改进建议，提升内容可读性。

优化优化可读性被动长句

文本左右对齐工具 - 等间距填充英文段落

在英文文本的行内插入空格使其左右两端同时对齐，模拟印刷排版效果。

文本处理对齐排版文本