1. 程式人生 > >瀏覽器如何設定小於8px的字型

瀏覽器如何設定小於8px的字型

  1. safari,iphone 已經支援1px
  2. android 1px
  3. pc chrome 8px 最小

手機端可以這樣直接寫:

<!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>