In today’s morning meeting, the product asked to change the font size from 12px to a smaller size. I thought to myself how difficult this was, so I casually agreed. Unexpectedly, when changing the CSS, when the font-size in Google Chrome is less than 12px, the font will no longer be reduced. My first reaction at that time was whether other css had covered the font. As a result, I couldn't find it after looking for a long time. So, only Baidu was involved, and the result was really surprising: It turns out that Google and Google-based browsers can only have a minimum font size of 12px in the Chinese language. I don’t know if this is a bug or Google’s humane design. No matter there are so many, we have to solve this problem anyway~ Since this is a classic compatibility problem, there must be many solutions. Surprisingly, on Baidu, all the solutions on the Internet are surprisingly similar:
html{
-webkit-text-size-adjust:none;
}
Then, after I used it happily, I found that it was useless. Later, I checked the information and learned that support for this attribute was removed after Chrome 27. Damn, isn't this a lie? Another solution was discovered:
.small-font{
font-size: 12px;
-webkit-transform-origin-x: 0;
-webkit-transform: scale(0.90);
}
Using the scaling of css3, the final size is: 12px * 0.9 (scaling ratio) = 10.8px;
It works Makes sense. But looking back, if I write it this way, will IE7 and IE8 be incompatible, or will it be 12px? As expected, it is not compatible. At this point, I looked back and thought, should I add a style font-size? I tried it, and it is indeed compatible with Google, IE7, and IE8. The code is as follows:
.small-font{ font-size:12px;
-webkit-transform-origin-x: 0; -webkit-transform: scale(0.90);
}
font-size:10.8px;
}
Warm reminder:
Um, after thinking about it, Others may also encounter this problem, and I can no longer waste time with online methods that cannot solve the problem, so I wrote this essay~
Haha~ I finally finished it. It’s my first time writing, so nervous~