Chrome不能显示小于12px的字体的解决办法，同时解决-webkit-transform: scale不支持行内标签的问题

解决方案

让指定文字使用自定义的class，如forcefontsize10

                                         
    Products
    
        88
    

并在css中自定义以下类：

.forcefontsize10 {
    display: inline-block;
    font-size: 12px;
    -webkit-text-size-adjust:none;
    -webkit-transform : scale(0.83,0.83);
}

.forcefontsize8 {
    display: inline-block;
    font-size: 12px;
    -webkit-text-size-adjust:none;
    -webkit-transform : scale(0.66,0.66);
}

.forcefontsize6 {
    display: inline-block;
    font-size: 12px;
    -webkit-text-size-adjust:none;
    -webkit-transform : scale(0.5,0.5);
}

Chrome效果图

重点

1. CSS规则“-webkit-text-size-adjust:none;”针对版本为27以前的chrome可自定义小于12像素的大小；

2.Chrome更新到27版本就不支持“-webkit-text-size-adjust:none;”了，需要使用CSS3的新规则：“-webkit-transform : scale(0.83,0.83);”，缩放指定dom，但必须是block级

3.CSS规则“display: inline-block;” 可允许指定文字不需要变成Block的独立一行，实现行内的小字体显示

他山之石

font-size<12 chrome不支持解决
今天，群里有人问道font-size<12 chrome不支持的问题。说实话，这个我一直都没留意过，正好借个机会给自己补习一下。
自己亲自试过，确实如此，当font-size<12 chrome都当12px处理了，据说以前有个属性可以用，不过已经淘汰不支持了，也无法验证，那这里就不说了。这里用的方法是用css3的新属性：transform:scale();来达到对文本进行缩放，但是注意，他会对做用的元素进行整体缩放，而这不是我们所希望的，因为我们只是想单独缩放字体，所以采取一些措施：就是用一个标签把需要缩放的文本包起来，然后单独对他添加transform:scale();避免对其他元素影响。

如果单单是想要设置页面的font-size属性值小于12px，貌似是一个很简单、很正常、对于有这个需求的开发者理所当然的事情。
在chrome浏览器下，当设置font-size属性值小于12px时是无效的，当然网上很多地方也有解决办法，那就是使用“-webkit-text-size-adjust”。有的时候即使设置了这个属性在chrome里仍然有问题，网上也有一些论坛讨论作参考。
不过，退一万步讲，即使技术问题解决了，真的将font-size属性值设置到了12px一下来显示字体，这在浏览器的都是非常小的字体了，正常人开着都很困难，对视力障碍者来说就更是不方便了。所以，最好的解决这个问题的办法应该是，尽量不设置小于12px的属性值。