js判断浏览器 谷歌浏览器设置字体小于12px

我是电影通 2019-11-18 409 阅读

当前谷歌浏览器有一个问题,默认情况下不能设置小于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的功能。

最新游戏