WonderCSS

解决 Chrome 浏览器下字体不能显示小于 12px 的方法

在我们做网页设计时,对于某些文字的处理我们经常需要让他们更小一些。但在 Chrome 浏览器中所有小于 12px 的字体设置都无效,无论如何更改 CSS 最终仍是显示12px。因为中文一旦小于12px,就变得不易识别难以阅读,这样处理本意或许是好的。但有时我们仅仅是想要让英文和数字变小一些啊,一网打尽的设置就有些苛刻了。

对此我们找到了针对 Chrome 浏览器的解决方案,添加一个 webkit 私有属性到CSS样式表中即可:


body {
    -webkit-text-size-adjust: none;
    -webkit-transform: scale(0.85);
}

顾名思义,用 Webkit 内核浏览器的文字大小调整功能,这样我们就能使字体大小尽在掌控了。

10月30日更新:

自从 Chrome 桌面版换为 Blink 内核后 -webkit-text-size-adjust 已经失效,那么我们就无法在字号上做文章了,变通一下,我们用 transform:scale(N) 来缩小字体以达到“小字号”目的。

By 于湛 发布于 2013.04.14 5,788 次浏览

发表评论

电子邮件地址不会被公开。 必填项已用*标注