background

In order to improve the user experience, Chrome has set the default min px font size for the browser, depending on the computer resolution and other conditions. Fonts smaller than this size will still be displayed in min PX

View the smallest font size in Chrome

Browser –> Settings –> Advanced –> Display –>Customise fonts–>Minimum font size

My minimum font here is 10px, so a 5px font will still appear as 10px in my browser

The solution

<div class="small-name"> user name </div>Copy the code

The CSS part

.small-name {
    font-size: 5px;
}
Copy the code

Change the CSS section to

.small-name { -webkit-transform-origin-x: 0; transform-origin-x: 0; - its - transform: scale (0.5); The transform: scale (0.5); font-size: 10px; }Copy the code

All Chrome browsers will display at half of 10px, or 5px.

A small problem

Following the above solution, you will find that the entire div has been reduced by half. How to make only the font smaller?

.small-name { width: 200%; -webkit-transform-origin-x: 0; transform-origin-x: 0; - its - transform: scale (0.5); The transform: scale (0.5); font-size: 10px; }Copy the code

Set the width to double, and there you go