当前谷歌浏览器有一个问题，默认情况下不能设置小于12px的字体。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.cxvn.com/" />
<title>谷歌浏览器设置字体小于12px </title>
<style type="text/css">
ul{list-style:none;}
.one{font-size:16px;}
.two{font-size:14px;}
.three{font-size:12px;}
.four{font-size:6px;}
</style>
</head>
<body>
<ul>
<li class="one">16px</li>
<li class="two">14px</li>
<li class="three">12px</li>
<li class="four">10px</li>
</ul>
</body>
</html>
可以看到为最后一个li的字体设置的10px大小并没有生效。
有不少文章建议使用谷歌的一个私有属性-webkit-text-size-adjust:none，不过这个属性已经在谷歌27版本已经失效，所以只能寻求其他的办法，比如利用CSS3的缩放功能，上述代码修改如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.cxvn.com/" />
<title>谷歌浏览器设置字体小于12px </title>
<style type="text/css">
ul{list-style:none;}
.one{font-size:16px;}
.two{font-size:14px;}
.three{font-size:12px;}
.four{
font-size : 12px;
-webkit-transform:scale(0.84,0.84) ;
transform-origin:0 0;
*font-size:10px;
}
</style>
</head>
<body>
<ul>
<li class="one">16px</li>
<li class="two">14px</li>
<li class="three">12px</li>
<li class="four">12px</li>
</ul>
</body>
</html>
上面代码较为良好的实现在谷歌浏览器设置字体大小为10px的功能。
1.《js判断浏览器 谷歌浏览器设置字体小于12px》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《js判断浏览器 谷歌浏览器设置字体小于12px》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/study/239.html