使用CSS打印媒体查询实现打印样式，通过@media print设置字体、隐藏元素、分页等规则，并在HTML中以内联、内部样式或外部文件方式引入，确保打印效果清晰完整。
在网页开发中，实现打印页面样式并不是通过“HTML函数”来完成的，因为HTML本身没有函数概念。真正的实现方式是使用CSS中的打印媒体查询（print media query）来控制页面在打印时的显示效果。你可以通过内联样式、<style>标签或外部CSS文件来配置这些规则。
使用打印媒体查询设置打印样式
打印媒体查询允许你针对打印设备定义特定的CSS样式。浏览器在调用打印功能（如用户按下 Ctrl+P）时会应用这些规则。
基本语法如下：
@media print {
/* 在这里写打印时生效的样式 */
body {
font-size: 12pt;
color: black;
background: white;
}
.no-print, nav, aside, footer, header {
display: none !important;
}
.page-break {
page-break-before: always;
}
}
常见打印样式配置建议
- 隐藏不需要打印的元素：比如导航栏、按钮、广告等，使用 display: none 隐藏。
- 调整字体和颜色：确保文字在纸上清晰可读，避免使用浅色文字或透明背景。
- 控制分页：使用 page-break-before、page-break-after 或 break-inside 避免内容被截断。
- 设置页面边距：可通过CSS的 @page 规则定义纸张边距。
立即学习“前端免费学习笔记（深入）”；
@page {
margin: 2cm;
}
@media print {
@page :first {
margin-top: 5cm; /* 第一页顶部留白 */
}
}
在HTML中引入打印样式的三种方式
你可以在HTML中通过以下任意一种方式添加打印样式：
-
内嵌样式标签：
<style>
@media print {
.header, .sidebar { display: none; }
body { font-family: Times; }
}
</style> - 外部CSS文件指定媒体类型： <link rel="stylesheet" href="print.css" media="print"> 这个CSS文件只在打印时加载，适合复杂的打印布局。
- 在主CSS中直接写@media规则：推荐做法，将屏幕和打印样式统一管理。
基本上就这些。关键在于使用 @media print 编写适配规则，并测试实际打印预览效果。不复杂但容易忽略细节。
