如何让Google字体应用于GWT小部件？

Question

我正在编写一个GWT应用程序，其中屏幕上的所有内容都在某个小部件或其他内容中，即普通HTML中的HTML文件没有任何内容。

我希望所有文字都以某种Google网络字体显示。我的问题是，如何以某种自动方式将字体应用于小部件？如果我将font-family CSS放在body {}中，那么没有一个小部件会选择字体，但普通的HTML会这样做（而且，就像我说的那样，没有任何小部件）。

另一方面，我想在我的样式表中避免这种事情，这就是我现在所拥有的：

.gwt-Label, .gwt-TextBox, .gwt-Button, .gwt-DialogBox .Caption, .gwt-EveryOtherKindOfWidget....
{
    font-family: Quattrocento, serif;
}

所以我的问题是，我怎样才能继承这个字体？我觉得我必须遗漏一些相当基本的东西。有人可以帮忙吗？

由于 尼尔

Answer 1

所以这里有几个问题：

默认的GWT主题（标准）包括standard.css文件。此文件包含所有窗口小部件的样式定义。主题在模块的xml文件中定义：

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

如何覆盖窗口小部件样式有不同的方法：

1. 复制standard.css文件，将其作为CSSResource包含在应用程序的ClientBundle中，并从模​​块的xml文件中删除继承行。
2. 添加样式表，该样式表覆盖模块的xml文件中继承行之后在standard.css中定义的窗口小部件样式（有关详细信息，请参阅here）

即：

<inherits name='com.google.gwt.user.theme.standard.Standard' />
<stylesheet src="CustomStylesheet.css" />

查看standard.css样式表，您将看到窗口小部件未定义任何字体。它实际上是从体型继承而来的。

摘自standard.css：

body, table td, select {
    font-family: Arial Unicode MS,Arial,sans-serif;
    font-size: small;
}

因此，您可能只需使用google字体覆盖自定义样式表中的正文部分，并且所有窗口小部件都将继承它。

第二个问题：由于样式表优先/继承，加载谷歌字体并不容易 此wiki介绍了如何将Google字体加载到GWT应用中。