一、通过下面的代码在不同的浏览器里打开进行测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
body{font-family: "黑体-简","微软雅黑";}
</style>
</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>
<p style="font-size:17px">font-size:17px,这是17号字体</p>
<p style="font-size:18px">font-size:18px,这是18号字体</p>
<p style="font-size:19px">font-size:19px,这是19号字体</p>
<p style="font-size:20px">font-size:20px,这是20号字体</p>
<p style="font-size:21px">font-size:21px,这是21号字体</p>
<p style="font-size:22px">font-size:22px,这是22号字体</p>
<p style="font-size:23px">font-size:23px,这是23号字体</p>
<p style="font-size:24px">font-size:24px,这是24号字体</p>
<p style="font-size:25px">font-size:25px,这是25号字体</p>
<p style="font-size:26px">font-size:26px,这是26号字体</p>
<p style="font-size:27px">font-size:27px,这是27号字体</p>
<p style="font-size:28px">font-size:28px,这是28号字体</p>
<p style="font-size:29px">font-size:29px,这是29号字体</p>
<p style="font-size:30px">font-size:30px,这是30号字体</p>
<p style="font-size:31px">font-size:31px,这是31号字体</p>
<p style="font-size:32px">font-size:32px,这是32号字体</p>
<p style="font-size:33px">font-size:33px,这是33号字体</p>
<p style="font-size:34px">font-size:34px,这是34号字体</p>
<p style="font-size:35px">font-size:35px,这是35号字体</p>
<p style="font-size:36px">font-size:36px,这是36号字体</p>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
body{font-family: "黑体-简","微软雅黑";}
</style>
</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>
<p style="font-size:17px">font-size:17px,这是17号字体</p>
<p style="font-size:18px">font-size:18px,这是18号字体</p>
<p style="font-size:19px">font-size:19px,这是19号字体</p>
<p style="font-size:20px">font-size:20px,这是20号字体</p>
<p style="font-size:21px">font-size:21px,这是21号字体</p>
<p style="font-size:22px">font-size:22px,这是22号字体</p>
<p style="font-size:23px">font-size:23px,这是23号字体</p>
<p style="font-size:24px">font-size:24px,这是24号字体</p>
<p style="font-size:25px">font-size:25px,这是25号字体</p>
<p style="font-size:26px">font-size:26px,这是26号字体</p>
<p style="font-size:27px">font-size:27px,这是27号字体</p>
<p style="font-size:28px">font-size:28px,这是28号字体</p>
<p style="font-size:29px">font-size:29px,这是29号字体</p>
<p style="font-size:30px">font-size:30px,这是30号字体</p>
<p style="font-size:31px">font-size:31px,这是31号字体</p>
<p style="font-size:32px">font-size:32px,这是32号字体</p>
<p style="font-size:33px">font-size:33px,这是33号字体</p>
<p style="font-size:34px">font-size:34px,这是34号字体</p>
<p style="font-size:35px">font-size:35px,这是35号字体</p>
<p style="font-size:36px">font-size:36px,这是36号字体</p>
</body>
</html>
二、测试结果:
1. iphone6-plus、iphone5: 微信、QQ直接打开、safari中字体可以从最1px字体开始;
2. 小米2s:微信、QQ浏览器最小显示字体8px;自带浏览器最小字体从1px开始;
3. 小米4s:firefox可以从最小字体1px开始;chrome中最小显示字体为12px;
4. pc: 360安全浏览器7:最小最示12px;firefox与ie10最小显示字体为1px。
5. 未标明的为未测机型;
结论:移动端最小字体为12px(仅chrome有此限制),建议最小使用12px;
如果设计稿中有小于12px的字体,按实际字号写css样式;
结论2: iphone类移动设备不受最小字号限制;
其它设备可能会受8px限制;
chrome中限制最小12px。
推测:随着手机分辨率不断扩大,字号将不再有限制;
现象:小米2的截图为720x1080, 10px字实测高度为10px*2-2px=18px;11px实测高度为20px;
现象2:截图尺寸,很奇怪
iphone6plus:639x1136
iphone5:640x1136
小米2s:720x1280
小米4s:540x960
ios7网页使用字体标准:三级别
17px
14px
10px (从上面的结果可以看到iphone类的设备字号不受12px限制)
字体可使用 黑体简