html - 如何使网页的打印视图缩放以始终适合单个物理页面？

Question

我有一个网页，无论内容有多少，我都想占用一个打印页面。具体来说，我希望根据需要放大或缩小各种测量值，尤其是字体大小，以填写打印页面。

我已经在使用@media print查询来设置打印所需的样式。我以为我已经满足了一切。这是旧的“它在我的机器上看起来正确”的案例。从我的笔记本电脑上的 Linux 上的 Firefox 打印到我的特定打印机看起来很完美。但是前几天，一位朋友从她的计算机/操作系统/浏览器/打印机组合打印了同一页，并且文本偏小，难以阅读。此外，页面底部有大约 1/4 到 1/5 的空白。

在其他页面（不用于打印）上，我玩过类似的东西vw，并vmin尝试让元素尽可能大，同时完全适合屏幕。但是总有一些窗口几何形状会导致页面与我的意图发生冲突。

有没有办法在 CSS 中可靠地编码我希望内容缩放到一页大小的意图？

标签： htmlcssprintingfontsfont-size

Answer 1

简短的回答是你不能“总是”让它工作。长的答案是，一旦你添加了除纯文本和纯字体之外的任何接近格式的东西，你就会遇到麻烦，需要成为 CSS 霸主。你的句子非常准确地描述了现实：

总是有一些窗口几何图形导致页面与我的意图发生冲突。

如果你真的需要你的网页很好地适合一个页面，唯一 100% 成功率的选项是创建一个打印文件：手动将你的网页转换成 Microsoft Word 中漂亮的文档，Pages for mac os 或 InDesign，然后将其导出为您在网页上提供的 PDF。