CSS 如何设置文本字体小于12px 像素、设置文字字体变小

在做一个客户的项目的时候，客户要求将网站中某些内容的字体大小变的更小一点，（心中思索，不就是改一下文本的字体大小么！小菜一碟啊！）然后就满口答应了，开始大刀阔斧的进行修改，打开开发工具，找到对应的文字所属的标签容器对应的CSS样式，将字体变为6px，然后打开浏览器预览测试，不想一看字体大小竟然没有改变，心中思索是不是有缓存，然后又各种清空缓存一顿操作，最后发现怎么弄文字大小还是12px左右，这是怎么回事呢？难道是浏览器有限制？

根据遇到的问题：如何在浏览器中使用CSS控制文本的字体显示变得更小，小于12px像素，静下来进行思考和推理，肯定是浏览器的问题，然后各种搜索、查找发现了浏览器的会有一个字体显示最小的限制这样的特性：Chrome27 之前的中文版桌面浏览器会默认设定页面的最小字号是12px，英文版则没有限制，主要是因为chrome认为汉字小 于12px就会增加识别难度，尤其是我们页面常用的中文字体宋体和微软雅黑，这时候就需要取消浏览器的自动调整功能了。

对于内核为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提供的 对象转换 来缩放字体的大小，可以定义如下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 */
}