ExtJs修改默认字体大小的几种实用方法

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; /*字体大小设置*/
}

三种方法各有适用场景：全局替换最彻底，针对性修补最稳妥。建议先在测试环境中验证，避免对现有布局造成影响。