使用CSS @page添加打印页面页码：IE失效、Chrome content不显示求助

嘿，我来帮你搞定这个页面计数器的坑！你遇到的问题其实挺常见的，咱们一步步拆解：

首先说IE的情况 #

IE从始至终就完全不支持CSS Paged Media规范（也就是@page规则），这是浏览器本身的硬限制，没有任何CSS层面的解决方案。如果必须兼容IE，只能用JavaScript来模拟页码功能——比如打印前动态计算页面数量，在每个页面底部插入页码元素，打印完再删掉它们。

然后是Chrome里content不显示的问题 #

Chrome对@page的支持其实是有的，但有几个容易踩的坑：

• 字体加载问题：你用了自定义字体FlamaSemicond-Basic，Chrome打印时可能没加载到这个字体，导致文字显示不出来。建议先换成系统字体（比如Arial）测试，确认能显示后再处理自定义字体的加载（要确保字体文件能被打印进程访问到）。
• margin设置太极端：你给@page设了margin:10%，可能底部的@bottom-center区域被挤得没有空间了，导致内容无法显示。可以换成具体的长度值，比如margin: 2cm 1cm，给底部留出足够的显示区域。
• Chrome打印设置的默认限制：有时候Chrome默认会忽略一些打印样式，你可以打开打印预览，点击「更多设置」，勾选「背景图形」（虽然这里是文字，但连带的样式渲染可能会受影响）。

实现页码计数器的正确代码示例 #

如果要做页码，光用content: "Hello!"不够，得结合CSS计数器来实现递增的页码。试试这个代码：

/* 先在body上重置页码计数器 */
body {
  counter-reset: page;
}

@page {
  size: auto;
  margin: 2cm 1cm; /* 给底部留出足够空间 */
  
  @bottom-center {
    font-family: Arial, sans-serif; /* 先用系统字体测试 */
    font-size: 10pt;
    color: black;
    content: "Page " counter(page); /* 显示当前页码 */
  }
}

/* 如果有手动分页的元素，给它加这个类，触发计数器递增 */
.page-break {
  page-break-after: always;
  counter-increment: page;
}

使用的时候，如果你需要手动分页（比如某个标题后换页），就给那个元素加class="page-break"，这样页码会自动递增。另外要注意：Chrome需要页面里有足够的内容触发分页，不然只会显示第一页的页码。

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