DesignerIf the text on the picture is 10px, we will implement it on the web page. Often designers come back to us and ask, can this font be smaller? What I designed is 10px? Why is it 12px? In fact, we all know that the minimum font size of Google Chrome is 12px, no matter you set it to 8px or 10px, in Only 12px will be displayed in the browser, so how to solve this cheating problem? Let’s take a look at the solutions!
Our approach is:
For the Google Chrome kernel, add the webkit prefix and use the attribute transform:scale() Go to Zoom!
Code demonstration:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
font-size: 12px;
display: inline-block;
-webkit-transform:scale(0.8);
}
</style>
</head>
<body>
<span>测试10px</span>
</body>
</html>The above is how to make Chrome support text smaller than 12px in html? All the content, please go to this siteSearchfor more!
Related recommendations:
How to optimize HTML web pages
How is the CSS scroll bar style compatible with IE8 and Chrome browsers?
How to deal with the incomplete display of the last line of text in HTML
The above is the detailed content of How to make Chrome support text smaller than 12px in html?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
