ExtJS默认采用11px字体，但在不同浏览器下的渲染表现存在明显差异——IE中看起来接近12px，而Firefox中却缩小至10px，视觉效果很不协调。本文整理了几种实用的ExtJS字体大小调整方法，可有效解决浏览器兼容问题，直接应用即可。
方法一：全局替换CSS中的字号
最直接的做法：打开ext-all.css，将所有11px批量替换为12px。这样整个框架的字号就能统一为12px，消除浏览器间的差异。
如果需要调整更大（例如15px），仅替换11px还不够，还需将与font相关的12px一并替换为目标字号。但执行此操作后，按钮可能出现毛边问题。解决方案是在样式文件中添加以下代码：
复制代码 代码如下:
.ext-ie .x-btn-text-icon .x-btn-center .x-btn-text {
padding:3px 0px 0px 0px;
}
添加后毛边即可消除。
方法二：针对浏览器差异的统一修复
前面提到，11px在IE和Firefox中的渲染效果不同。经过多方验证，最有效的方案依然是直接修改ext-all.css，查找所有11px并替换为12px。此操作能从根本上消除字体在不同浏览器下的边缘渲染问题，实测效果稳定。
方法三：ExtJS 3.2.1 版本专用方案
网上不少资料建议在页面中加入：
复制代码 代码如下:
.x-btn-text{
font-size:15px;
}
但实测在IE9和Firefox下该方案并未生效。经过在ext-all.css中反复调试，发现需要更精确的定位。将以下代码放入自定义CSS文件中引用，即可正常调整按钮字体大小：
复制代码 代码如下:
.x-btn-text-icon .x-btn-icon-small-left .x-btn-text{
background-position: 0 center; /*默认*/
background-repeat: no-repeat; /*默认*/
padding-left:18px; /*默认*/
height:16px; /*默认*/
font-size:15px; /*字体大小设置*/
}
三种方法各有适用场景：全局替换最彻底，针对性修补最稳妥。建议先在测试环境中验证，避免对现有布局造成影响。
