浏览器如何设置小于8px的字体

96 阅读 0 评论 64 点赞

我是靠谱客的博主粗心羊，最近开发中收集的这篇文章主要介绍浏览器如何设置小于8px的字体，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

safari,iphone 已经支持1px
android 1px
pc chrome 12px 最小

手机端可以这样直接写：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动端</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<p style="font-size:1px">font-size:1px，这是1号字体</p>
<p style="font-size:2px">font-size:2px，这是2号字体</p>
<p style="font-size:3px">font-size:3px，这是3号字体</p>
<p style="font-size:4px">font-size:4px，这是4号字体</p>
<p style="font-size:5px">font-size:5px，这是5号字体</p>
<p style="font-size:6px">font-size:6px，这是6号字体</p>
<p style="font-size:7px">font-size:7px，这是7号字体</p>
<p style="font-size:8px">font-size:8px，这是8号字体</p>
<p style="font-size:9px">font-size:9px，这是9号字体</p>
<p style="font-size:10px">font-size:10px，这是10号字体</p>
<p style="font-size:11px">font-size:11px，这是11号字体</p>
<p style="font-size:12px">font-size:12px，这是12号字体</p>
<p style="font-size:13px">font-size:13px，这是13号字体</p>
<p style="font-size:14px">font-size:14px，这是14号字体</p>
<p style="font-size:15px">font-size:15px，这是15号字体</p>
<p style="font-size:16px">font-size:16px，这是16号字体</p>
</body>
</html>

pc端：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PC端</title>
<style>
/*html{
　　 -webkit-text-size-adjust:none;
　　}*/
.small-font{
font-size: 12px;
-webkit-transform-origin-x: 0;
-webkit-transform: scale(0.33);
}
/*.smallsize-font {
　font-size:4px;
}*/
</style>
</head>
<body>
<p class="small-font smallsize-font">font-size:4px，这是4号字体</p>
<p style="font-size:12px">font-size:12px，这是12号字体</p>
</body>
</html>