pre元素字体大小被限制为12px的跨浏览器兼容问题

Windows平台的Chrome和Edge浏览器默认有最小字体大小限制（通常是12px），这个浏览器级别的设置会直接覆盖CSS里更小的font-size值——哪怕你加了!important也没用，这就是为什么Mac、Android端显示正常，Windows端却自动跳到12px的原因。

给你两个可行的解决思路：

方案一：修改浏览器本地设置（仅适合个人测试） #

如果你只是自己调试用，可以手动改浏览器的最小字体限制：

• 打开Chrome/Edge的设置页面
• 找到「外观」分类下的「字体大小」选项
• 调整「最小字体大小」到0px或比2px更小的数值

但这个方法需要用户自己操作，不适合面向普通访客的公共网站。

方案二：用transform缩放替代直接设置小字体（推荐） #

通过CSS的transform: scale()来缩放元素，这个方法不受浏览器最小字体限制，是更通用的解决方案。具体做法是先给pre设置一个浏览器允许的最小字体（比如12px），再按比例缩放：

修改后的CSS代码：

#terminal-ascii-art {
  font-size: 12px; /* 基于浏览器允许的最小字体 */
  font-family: monospace; /* 确保ASCII艺术对齐，可选但推荐 */
  line-height: normal;
  padding: 0;
  margin: 0;
  border: 0;
  transform-origin: top left; /* 固定缩放原点，避免偏移 */
}

@media screen and (min-width: 500px) {
  #terminal-ascii-art {
    transform: scale(0.1667); /* 12px × 0.1667 ≈ 2px 效果 */
    background-color: white;
    color: black;
  }
}

@media screen and (max-width: 500px) {
  #terminal-ascii-art {
    transform: scale(0.125); /* 12px × 0.125 = 1.5px 效果 */
    background-color: black;
    color: white;
  }
}

注意：缩放后元素的占位空间还是原来12px字体的尺寸，如果需要调整布局，可以配合overflow: hidden的外层容器，或者通过负margin来修正元素的实际占用空间。

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