代码笔记

CSS如何设置小于12px的字号

阅读

使用CSS文字调整属性来解决

对于内核为webkit的浏览器,禁止浏览器配置调整网页的字体大小,CSS定义方式:.adjustment-style { -webkit-text-size-adjust:none; font-size:9px; },text-size-adjust 属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小,safari 3.0+,chrome 1.0+可以支持。属性值可以为三种:percentage:字体显示的大小;auto:默认,字体大小会根据设备/浏览器来自动调整; none:字体大小不会自动调整;有的地方说该属性最初专门是为iPhone版safari设计的,用来自动调整普通网页在iPhone手机端字体的展现问题,不过,既然是webkit的 私有属性,现在也经常用在webkit内核的桌面浏览器限制页面展示。也就是说,这是webkit的一个bug。在最新版的Chrome已经修复。

需注意的是,不合理的使用-webkit-text-size-adjust:none会造成许多不好的影响。比如将其定义为全局属性的话,在Chrome中当用户放大缩小页面(PC上按住Ctrl滚动鼠标滚轮可缩放网页)的时候,文字却维持定义的大小而不放缩,给用户带来的不太友好的体验。在使用时,最好定义为局部有效,而不要一句html{-webkit-text-size-adjust:none;}就好了。在PC桌面版Chrome 27上正式取消了-webkit-text-size-adjust属性的支持,实际上是修正了原有的bug。如果定义该属性在Chrome调试窗 口会显示Unknown property name,所有字号最小为12px。但移动端chrome/safari目前依然支持-webkit-text-size-adjust属性。因为此 属性的滥用会使得webkit内核的浏览器失去调节能力,对于有视觉障碍的浏览者非常不友好(尤其是移动终端)。

手动设置浏览器选项来解决

对于其他内核的浏览器,由于没有 -o-text-size-adjust,这样的CSS 属性,目前Opera也不支持(fontsize:9px)的属性,我们可以通过自己手动设置了: 工具->首选项->高级->字体->最小字体大小(像素)。

使用CSS3缩放来解决

我们可以使用CSS3提供的 对象转换 来缩放字体的大小,可以定义如下CSS样式:

.text_adjust {
    font-size: 9px;
    transform:scale(0.75);
    -ms-transform:scale(0.75);/* IE 9 */
    -moz-transform:scale(0.75);/* Firefox */
    -webkit-transform:scale(0.75);/* Safari 和 Chrome */
    -o-transform:scale(0.75);/* Opera */
}




推荐阅读

CSS超出宽度高度显示..
CSS超出宽度高度显示...
CSS背景过滤器“backdrop
CSS背景过滤器“backdr...
解决IE8及以下版本不支持
解决IE8及以下版本不支...
关于position的fixed属性失
关于position的fixed属性失...