The final solution to Chrome's minimum font size limit of 12px

I believe that many users who make websites will have such a problem. The default minimum font size of Chrome is 12px (the latest English version also has this problem). This is designed by Chrome to better display Chinese, but this will cause some superscripts and subscripts to be too large, affecting the user experience. I was also troubled by this problem when I was developing Hybid App. I searched Baidu for a long time and found that all the solutions on the Internet were surprisingly similar. There were only two solutions:

1-Adapt to Google Chrome with prefix

html{
  -webkit-text-size-adjust:none;
  }

Add the following attribute to the HTML tag. However, when I opened the browser, I found that it was useless. Later I found that this attribute was abandoned after Chrome 27. It’s really annoying!

2-Use the transform property of CSS3

<div class=""small-font>This is a paragraph of text</div>

.mini-font{
  font-size: 12px;
  -webkit-transform-origin-x: 0;
  -webkit-transform: scale(0.90);
}

This method uses the scaling property of CSS3, that is, it reduces the overall text size to 0.9 times the original size. However, there is a flaw. It only reduces the size of the text, but cannot reduce the area occupied by the text, that is, it cannot reduce the width and height of the element, which is very uncomfortable.

3- The final solution! ! ! ! Start with browser settings

After trying the first two methods, I found that they didn't work. I had no choice but to use a mobile emulator for debugging and found that the font could be set to 10px or smaller. So I wondered if Google Chrome itself limits the minimum font size? ? ? So I opened the browser and started to explore slowly, and finally found a cure.

1. Open the browser and find " Settings "

2. Search for " font "

3. Click " Customize Fonts "

4. Change the " minimum font size " to 10px or smaller (it is recommended not to be less than 8px, which is not conducive to reading)

5. Then, the problem was solved. In fact, it was because Google Chrome itself had set a minimum font size limit. When I later debugged with IE and Firefox, the font could be set to 10px and 8px. This made me more suspicious that it was a problem with Google Chrome, not with the CSS code.

This is the end of this article about the final solution to Chrome's minimum font size limit of 12px. For more relevant information about Chrome's minimum font size, please search 123WORDPRESS.COM's previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!