Fonts 如何在ExtJS4中为整个应用程序设置字体样式？

我想知道如何为整个ExtJS4应用程序设置特定的字体样式（大小、字体名称等）

我希望有一些单一的设置，可以为整个应用程序的工作

---

请开导

在自定义CSS文件中使用以下CSS代码：

.x-body {
    font-family: Tahoma;
    font-size: 11px;
    color: #333;
}

自定义CSS文件位于ext all.CSS文件之后，如下所示：

<link href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<link href="mycss.css" rel="stylesheet" type="text/css">

Ext.define('Ext.chart.theme.MyTheme', {
    extend:'Ext.chart.theme.Base',

    constructor: function() {
        Ext.chart.theme.MyTheme.superclass.constructor.call(this, {
            axisLabelBottom: {
                 fill: '#333',
                 font: 'Tahoma 11px'
            },
            axisLabelLeft: {
                 fill: '#333',
                 font: 'Tahoma 11px'
            },
            // other configs
        });
    }
});

对于图表则不同。因为他们使用主题来设计样式。因此，您可以创建一个主题并将其用于图表。要创建主题，可以执行以下操作：

<link href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<link href="mycss.css" rel="stylesheet" type="text/css">

Ext.define('Ext.chart.theme.MyTheme', {
    extend:'Ext.chart.theme.Base',

    constructor: function() {
        Ext.chart.theme.MyTheme.superclass.constructor.call(this, {
            axisLabelBottom: {
                 fill: '#333',
                 font: 'Tahoma 11px'
            },
            axisLabelLeft: {
                 fill: '#333',
                 font: 'Tahoma 11px'
            },
            // other configs
        });
    }
});

要查看所有可用的配置，请查看下面的链接，并查找主题标题：

要对图表使用“MyTheme”，您可以执行以下操作：

{
    // ...
    xtype: 'chart',
    theme: 'MyTheme',
    // ..
}

---

非常感谢你的回答。我试着用你的解决方案。它可以工作，但对于某些控件（如combobox），它设置的字体大小不适用于图表和面板标题。是否有其他规则来设置图表、面板标题的字体样式？不客气。我已经根据您的请求更改了答案。有时候，body元素不是用.x-body类生成的。在这种情况下，您可以使用：

body、.x-body{…}

，但上面的css不会更改所有字体（网格行、面板标题、字段等…）。有什么解决方案吗？@Natasha jan！：这并不是一个好的CSS，特别是如果您更改字体大小，所有组件都以错误的方式绘制它们自己（因为ExtJs在像素系统中工作）。正确的解决方案是使用ExtJs主题工具，可在此处访问：