针对谷歌浏览器以及谷歌内核的浏览器默认最小字体12px的正确解决方案（实用）

本文详细介绍了如何在谷歌浏览器中解决字体大小限制的问题，当font-size设置小于12px时，通过使用CSS3的scale属性结合transform-origin实现字体进一步缩小，并提供了一种兼容IE7、IE8的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文出处：https://blog.youkuaiyun.com/qq_27682041/article/details/72850719

谷歌浏览器中font-size小于12px时，字体就不会再缩小了。当时我的第一反应就是会不会是其他css把字体覆盖了。结果看了半天也没发现。于是，只百度一伙了，结果还真让人大吃一惊：原来谷歌以及谷歌内核的浏览器在中文语言下最小字体只能是12px。不知道这算是一个bug还是谷歌人性化的设计。不管那么多了，反正要解决这个问题呀~既然这是一个经典的兼容性问题，一定有很多解决方法吧。让人吃惊的是，再百度一伙，网上所有的解决方案都惊奇地相似：

html{　　
    -webkit-text-size-adjust:none;　　
}

　　然后我满心欢喜地用上去之后，发现并没有什么鸟用。再后来，又查了下资料了解到在chrome 27之后，就取消了对这个属性的支持。尼玛，这不是坑爹吗？柳暗花明又一村，然后发现了另一种解决办法：

.small-font{            
    font-size: 12px;            
    -webkit-transform-origin-x: 0;            
    -webkit-transform: scale(0.90);        
}

　　利用css3的缩放，其最终大小就是：12px * 0.9（缩放比例） = 10.8px;

　　居然行得通。但回头一想，这么写的话，IE7 IE8会不会不兼容，还是12px呢？不出所料，果然不兼容。此时，又回头一想，要不再加个样式font-size？试了一下，果然兼容谷歌，IE7，IE8，代码如下：

.small-font{    　　　  
    font-size:12px;             
    -webkit-transform-origin-x: 0;            
    -webkit-transform: scale(0.90);        
}        

.smallsize-font { 　　　　
    font-size:10.8px;       　　        
}　　

<p style="color: #FF0000;" class="small-font smallsize-font">温馨提示：</p>

最终用small-font 和 smallsize-font 两个类搞掂兼容性问题