谷歌瀏覽器設定字型小於12px

admin發表於2019-01-10
谷歌瀏覽器

當前谷歌瀏覽器有一個問題，預設情況下不能設定小於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的功能。

相關文章