Several ways to change the default font size of ExtJs (organize it yourself)_extjs

Here are several methods of collecting online, I hope it will be useful to everyone.
1.
Just replace all 11px in the ext-all.css style file with 12px, so that it becomes a unified 12px font.
But if you want to increase the size, not only do you need to change the 11px of the source file to 15px, but you also need to change the 12px related to the font to 15px.

After the modification, the button has rough edges. Add

to the style file. Copy the code . The code is as follows:

.ext-ie .x-btn-text-icon .x-btn-center .x-btn-text {
padding:3px 0px 0px 0px;
}

The burrs are gone!
2.
Because the Extjs font size displayed in different browsers or different versions of the same browser is different. And it looks smaller. Not pleasing to the eye.

Check it online and get a piece of useful information: Extjs uses 11px font in many cases. The 11px size is an edge font. Different browsers render 11px
differently. IE’s The rendering is similar to 12px, and in Firefox, it is similar to 10px, causing the font to be too small in FF
.
In order to completely solve the font size problem, open ext-all.css directly, find all 11px and replace it with 12px. Problem solved
3.
Extjs version 3.2.1, font size modified
I found a lot of information on the Internet, and they all said to add

copy Code The code is as follows:

.x-btn-text{
font-size:15px;
}

This is fine, but it still doesn’t work under IE9 and FF.
Later, I went to ext-all.css and tried it slowly, and then I found the setting place.
Just put the following code into other css for reference:

Copy the code The code is as follows:

.x-btn-text-icon .x-btn-icon-small-left .x-btn-text{
background-position: 0 center;/*Default*/
background-repeat : no-repeat;/*Default*/
padding-left:18px;/*Default*/
height:16px;/*Default*/
font-size:15px;/*Font size setting */
}