添加页面计数器以使用@page打印页面CSS

Question

碰巧我有一个要打印的HTML页面。我想添加一个页面计数器，并试图为此使用@page。但是后来，我注意到@page在Internet Explorer中根本无法工作。不过，它可以在Chrome中运行。除了content属性以外的所有内容都不会显示。

这是代码

@page {
        size: auto; /* auto is the current printer page size */
        margin: 10%; /* this affects the margin in the printer settings */
        @bottom-center{
            font-family: FlamaSemicond-Basic;
            font-size: 10pt;
            color: black;
            content: "Hello!";
        }

}

Answer 1

我有一个类似的问题：使用Chrome79。在这里（我认为？）（大多数情况下）Chrome支持“ @page”-https://caniuse.com/#search=%40page

下面给出一个示例：https://drafts.csswg.org/css-page-3/
（其示例编号12如下所示）。

以下样式表建立了包含 标题（“ Hamlet”）在左侧和页码，后跟 右侧的“页面”：

@page {尺寸：8.5英寸11英寸；利润率：10％；

@ top-left { 内容：“哈姆雷特”； } @右上 { 内容：“页面”计数器（页面）； }

我进行测试时-Chrome遵循页面大小，但不显示页码。