Recently, I have been interviewing and have encountered many interesting things. For example, today, before the interview, I did a set of interview questions. Among them, there was an interesting question that I had never seen before, so I decided to record it:
<!-- Chrome browser cannot display fonts below 12px, they are all displayed as 12px. How to solve this? -->
I was a bit confused because I had never encountered this situation before when writing code. However, since it was asked, I had to come up with a solution.
First, I thought of a previous problem: how to achieve a 0.5px border. It can be achieved through scale(0.5), which is a new property in CSS3.
So at that time, I wrote that it can be achieved through transform: scale(). However, the interviewer did not mention these issues during the interview.
After returning home, after having dinner and sitting next to the computer, I was about to browse GitHub when I suddenly remembered this question and tested it myself:
<div style="font-size: 13px;">
Test
</div>
<div style="font-size: 12px;">
Test
</div>
<div style="font-size: 11px;">
Test
</div>
There really is such a problem. Fonts below 12px cannot be displayed correctly in Chrome and are all displayed as 12px.
Then I used scale to set the property:
<div style="font-size: 13px;">
Test
</div>
<div style="font-size: 12px;">
Test
</div>
<div style="font-size: 11px;transform: scale(0.5);">
Test
</div>
The font can indeed be further reduced to the level I wanted, but there are some drawbacks. All properties with lengths are reduced, such as the length of the div in the image. It was originally set to 100%, but now it is only half of the original size.
Although this problem exists, according to my estimation, the websites we usually browse basically do not have fonts smaller than 12px! At least I haven't encountered it. I think the interview question is also testing our handling of some obscure knowledge, but it is not considered obscure. There was 0.5px before, and now there is 12px. They are actually similar.
When encountering this problem, it is indeed possible to handle it with scale(), and then carefully set other properties to avoid more drawbacks.