如何用纯CSS自动增大字体以填满指定页数纸张且无留白？

首先明确：纯CSS本身没有动态检测内容页数并自动调整字体大小的原生能力——它是声明式样式语言，不具备运行时逻辑判断功能。但可以通过以下技巧减少手动调整的繁琐，实现近似效果：

1. CSS变量+打印媒体查询的半自动化方案 #

用全局变量统一控制打印字体大小，修改时无需反复查找打印样式块：

/* 全局字体变量，修改这里即可快速调整打印字体 */
:root {
  --print-font-size: 16px;
}

/* 屏幕端模拟打印纸张宽度，方便提前预览 */
body {
  font-size: 1rem;
  max-width: 8.5in;
  margin: 0 auto;
  padding: 0 1rem;
}

/* 打印专属样式 */
@media print {
  @page {
    size: A4; /* 指定纸张尺寸，如letter/A4 */
    margin: 0.5in; /* 统一页边距，消除浏览器默认差异 */
  }
  body {
    font-size: var(--print-font-size);
    width: 100%;
    margin: 0;
    padding: 0;
  }
  /* 隐藏不需要打印的元素 */
  .no-print {
    display: none !important;
  }
}

使用时只需修改:root里的--print-font-size值，从基础值逐步增大，直到打印预览刚好填满指定页数即可。

2. 视口单位适配打印纸张 #

利用打印时的页面视口特性，用vw（视口宽度）单位设置相对字体大小，让内容自动适配纸张宽度：

@media print {
  @page {
    size: A4;
    margin: 0.5in;
  }
  body {
    font-size: 2.4vw; /* 按纸张宽度比例设置，可根据内容微调 */
    line-height: 1.5;
  }
  /* 限制标题最大字号，避免溢出 */
  h1, h2 {
    font-size: min(4vw, 32px);
  }
}

这种方法无需手动设置固定值，但无法精确控制页数，需根据内容长度微调vw比例。

3. 微调间距强制内容适配指定页数 #

如果内容长度接近目标页数，可通过调整行高、元素边距来“挤”或“拉”内容：

@media print {
  @page {
    size: A4;
    margin: 0.5in;
  }
  /* 通过变量微调全局行高 */
  body {
    line-height: calc(1.5 + var(--line-adjust, 0));
  }
  /* 针对段落、标题的边距微调 */
  p {
    margin-block: 0.45em;
  }
  h2 {
    margin-block: 0.9em;
  }
}

给--line-adjust设置正负小数（比如0.05或-0.05），可细微调整整体内容高度，帮助刚好填满指定页数。

需要注意：以上都是近似解决方案，纯CSS无法实现完全自动的页数检测与字体调整。如果需要100%自动的效果，必须结合JavaScript计算打印页数并动态调整样式，但这已经超出纯CSS的范畴。

内容的提问来源于stack exchange，提问作者Dan Jacobson