如何让 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 文件中删除inherit 行。
2. 在模块的 xml 文件中的继承行之后添加您的样式表，该样式表将覆盖 standard.css 中定义的小部件样式（有关详细信息，请参阅here）

即：

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

查看standard.css 样式表，您会发现小部件没有定义任何字体。它实际上是从body style继承而来的。

摘自standard.css：

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

所以您可能只需要使用 google 字体覆盖自定义样式表中的正文部分，所有小部件都会继承它。

第二个问题来了：加载 google 字体并不容易，因为样式表优先/继承。
这个wiki 描述了如何将谷歌字体加载到你的 GWT 应用程序中。