使用@page content css设置带有内容的页面标题答案

【问题标题】：Setting Page Headers with content using @page content css使用@page content css设置带有内容的页面标题
【发布时间】：2016-03-27 04:13:41
【问题描述】：

我正在尝试在使用 CSS @page 规则打印和传真时在文档的所有页面中包含标题文本。但是当我在 Chrome 中看到预览时，它对我不起作用。我正在jsfiddle中检查这个。这是我一直在处理的代码的链接Code Link

我知道使用@media 可以添加打印内容。但我想使用@page css 来做到这一点。
如果你添加

.subpage: after {
     content: "name";
 }

内容已添加。但是如果你做同样的事情

@page {
     @top-right {
          content: "name";
     }
}

它不起作用。有没有办法让这个工作？

【问题讨论】：

【解决方案1】：

这正是它的工作方式，您的示例是正确的。然而，现代浏览器还不支持@page。您必须使用诸如 Prince XML、Antenna House Formatter 的 PDF Reactor 之类的软件。

您可以下载PrinceXML的评估版

【讨论】：

【解决方案2】：

pwavg 是正确的。 目前使用的渲染器都不支持@top-right 规则，这就是它不适合你的原因。你可以看到它here on Wikipedia（搜索@top-right）。

我知道 Wikipedia 不是最可靠/最新的来源，但我想总比没有好。至少在这个特定页面上，它看起来更新得比较活跃。

据我所知，唯一支持它的渲染引擎（Prince 除外）是旧的 Opera Presto 渲染器，但已不再开发。

【讨论】：