如何在Chrome谷歌浏览器下设置小于12px的字体
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在Chrome谷歌浏览器下设置小于12px的字体相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>title</title>
<style type="text/css">
ul{
list-style:none;
}
.first{
font-size:16px;
}
.second{
font-size:14px;
}
.third{
font-size:12px;
}
.fourth{
font-size:10px;
}
</style>
</head>
<body>
<ul>
<li class="first">16px</li>
<li class="second">14px</li>
<li class="third">12px</li>
<li class="fourth">10px</li>
</ul>
</body>
</html>
以上代码在谷歌浏览器中并不能将字体大小设置为10px。下面就对上面的代码进行一下修改:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>title</title>
<style type="text/css">
html,body{
-webkit-text-size-adjust:none;
}
ul{
list-style:none;
}
.first{
font-size:16px;
}
.second{
font-size:14px;
}
.third{
font-size:12px;
}
.fourth{
font-size:10px;
}
</style>
</head>
<body>
<ul>
<li class="first">16px</li>
<li class="second">14px</li>
<li class="third">12px</li>
<li class="fourth">10px</li>
</ul>
</body>
</html>
以上代码实现了将字体大小设置为10px的功能。核心是添加了如下代码:
html,body{
-webkit-text-size-adjust:none;
}以上是关于如何在Chrome谷歌浏览器下设置小于12px的字体的主要内容，如果未能解决你的问题，请参考以下文章
怎么解决谷歌浏览器chrome css font-size小于12px时无效
设置html font-size:10px;Chrome下1rem=12px,在火狐下1rem == 10px;为啥？如何让Chrome 1rem=10px