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

2019-1-10 09:41| 作者: admin| 查看: 214| 评论: 0|来自: 蚂蚁部落

当前谷歌浏览器有一个问题,默认情况下不能设置小于12px的字体。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/10/094228usdrd8ni860pdit0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到为最后一个li的字体设置的10px大小并没有生效。

有不少文章建议使用谷歌的一个私有属性-webkit-text-size-adjust:none,不过这个属性已经在谷歌27版本已经失效,所以只能寻求其他的办法,比如利用CSS3的缩放功能,上述代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</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的功能。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部