我已经阅读了很多有关打印页码的网站，但是当我尝试打印html页时，仍然无法显示它。
接下来是CSS代码：
@page {
margin: 10%;
@top-center {
font-family: sans-serif;
font-weight: bold;
font-size: 2em;
content: counter(page);
}
}
我试图把这个页面规则放进去
@media all {
*CSS code*
}
在其外部，尝试将其放入@media print，但没有任何帮助使我在页面上显示页码。我尝试使用FireFox和Chrome（您知道基于WebKit的浏览器）。我认为问题出在我的HTML或CSS代码中。
有人可以告诉我一个@page在具有多个页面的html大页面中实现此规则的示例吗？我只需要html页面的代码和css文件的代码即可。
PS我拥有最新支持的浏览器版本。
Answers:
由于具有页面编号的@page暂时无法在浏览器中工作，因此我一直在寻找替代方法。
我找到了Oliver Kohll发布的答案。
我将其重新张贴在这里，以便每个人都可以更轻松地找到它：
对于此答案，我们没有使用@page，它是纯CSS答案，但可以在FireFox 20+版本中使用。这是一个示例链接。
CSS是：
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: counter(page);
}
HTML代码是：
<div id="content">
<div id="pageFooter">Page </div>
multi-page content here...
</div>
这样，您可以通过将参数修改为#pageFooter来自定义页码。我的例子：
#pageFooter:after {
counter-increment: page;
content:"Page " counter(page);
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20;
-moz-border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
}
这个技巧对我来说很好。希望对您有帮助。
counter-increment: page到元素的CSS选择器而不是伪元素，:after并将保留content: counter(page)在:after选择器中。它适用于Chrome 71，Safari 12，不确定其他浏览器。
尝试使用https://www.pagedjs.org/。它为所有主要浏览器填充页面计数器，页眉/页脚功能。
@page {
@bottom-left {
content: counter(page) ' of ' counter(pages);
}
}
与PrinceXML，Antennahouse，WeasyPrince，PDFReactor等替代方案相比，它要舒适得多。
而且它是完全免费的！没有定价或其他。这真的救了我的命！
你可以试试看吗，可以用 content: counter(page);
@page {
@bottom-left {
content: counter(page) "/" counter(pages);
}
}
此javascript将在页面的右下角添加绝对定位的div，其页面号在所有浏览器中均可使用。
A4高度= 297毫米= 1123px（96dpi）
<html>
<head>
<style type="text/css">
@page {
size: A4;
margin: 0;
}
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = addPageNumbers;
function addPageNumbers() {
var totalPages = Math.ceil(document.body.scrollHeight / 1123); //842px A4 pageheight for 72dpi, 1123px A4 pageheight for 96dpi,
for (var i = 1; i <= totalPages; i++) {
var pageNumberDiv = document.createElement("div");
var pageNumber = document.createTextNode("Page " + i + " of " + totalPages);
pageNumberDiv.style.position = "absolute";
pageNumberDiv.style.top = "calc((" + i + " * (297mm - 0.5px)) - 40px)"; //297mm A4 pageheight; 0,5px unknown needed necessary correction value; additional wanted 40px margin from bottom(own element height included)
pageNumberDiv.style.height = "16px";
pageNumberDiv.appendChild(pageNumber);
document.body.insertBefore(pageNumberDiv, document.getElementById("content"));
pageNumberDiv.style.left = "calc(100% - (" + pageNumberDiv.offsetWidth + "px + 20px))";
}
}
</script>
<div id="content">
Lorem ipsum....
</div>
</body>
</html>
这就是你想要的：
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
}
WeasyPrint==0.42.2
**@page {
margin-top:21% !important;
@top-left{
content: element(header);
}
@bottom-left {
content: element(footer
}
div.header {
position: running(header);
}
div.footer {
position: running(footer);
border-bottom: 2px solid black;
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
<div class="footer" style="font-size:12pt; font-family: Arial; font-family: Arial;">
<span>Page <span class="pagenumber"/> of <span class="pagecount"/></span>
</div >**
Margin boxes完全不支持根据此表