This article is fang Yinghang’s original article, first published in the hungry people valley front end learning guide
Question: Why not set font size below 12px? What if you must set it below 12px?
Let’s look at what it looks like when you set font size below 12px.
The effect is different on other browsers:
Because Chrome’s wayward browser makes the following restrictions:
1. Font size has a minimum value of 12px (different operating systems, different languages may have different limits), anything lower than 12px will be displayed at 12px. The reason is that Chrome thinks Chinese below 12px is unfriendly to humans.
2. But you are allowed to set font size to 0.
3. The 12px limit can be adjusted by the user, go to Chrome :// Settings /fonts Settings, scroll to the bottom and you can adjust 12px to other values.
What if I must set the font to be less than 12px?
1. Before Chrome version 29, you can use ‘-webkit-text-size-adjust: None; ‘to remove this restriction. After version 29, this is no longer possible.
2. You can set the element to 12px and use transform: Scale (0.833333) to scale it down to something close to 10px. Note, however, that the transform: scale reduces font size, and also reduces some other properties, which will require more testing.
Well, that’s all for today’s sharing.