CSS 解决 Chrome 限制最小12px字号问题

在 PC 上,有的时候我们并不需要 Chrome 给我们限定 12px 的最小字号,可是我们也不可能强行要求用户人工设置一波(当年 CodeCademy 的 Bug 就是因为最小字号的问题),所以必须想办法。

旧版 Chrome 可以通过:-webkit-text-size-adjust:none来设置,但其实是利用了一个微小的 Bug,在新版已经修复了,此外,这种方法会导致全局的缩放失效,不够友好。

在新版中,可以用 scale 解决缩放的问题,但如果是:-webkit-transform: scale(0.75);,Safari 也在缩放范围内,有两个方法解决:

第一是所有的浏览器统一的使用缩放,在 12px 的基础上操作。

第二是针对 Chrome 进行 hack。

当然可能有些表现差异,缩放以中心为原点进行等比例缩放,而字体的缩小没有改变位置,所以布局上前者更统一。

后者的 hack 也可以补足,但是 hack 虽好,还是要慎用,以下这段代码据说是 Chrome 的 hack(也可以反向思维用 Safari 的 Hack 填坑),更多方法见参考链接:

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
    #selector {
        background: red;
    }
}

参考链接:

  1. 中文版Chrome浏览器不支持12px以下字体的解决方案
  2. Is there a Google Chrome-only CSS hack?

如果您觉得文章不错,可以通过赞助支持我

标签: 知识, 代码段

添加新评论