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

当前谷歌浏览器有一个问题，默认情况下不能设置小于12px的字体。
代码实例如下：

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.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.51qianduan.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的功能。

代码描述：谷歌浏览器设置字体小于12px。谷歌浏览器设置字体小于12px

下载全部收藏

204 271

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册

月映东窗

作品：41 | 粉丝：21

关注

TA的相关作品 >>更多

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

js判断浏览器类型源码实例下载

javascript判断当前浏览器是否支持cookie代码下载

JavaScript 判断IE浏览器的版本包括IE11

js判断当前浏览器是否是谷歌浏览器代码下载

<input type="file">实现浏览器样式统一简单介绍

IE低版本浏览器document.referrer丢失简单介绍