在 Google Web Toolkit 中使用自定义字体

Question

我想在 Google Web Toolkit Web 应用程序中使用自定义字体。我已尝试按照 https://code.google.com/p/gwt-webfonts/ 上提供的文档/代码进行操作，但我仍然遇到问题。我没有完全理解我需要做什么。

我有：

在我的项目中包含了 gwt-webfonts-0.1.jar 文件依赖项
向我的 gwt.xml 文件添加了包含依赖项：

创建了 ClientBundle 的扩展：

import com.google.gwt.dev.javac.testing.impl.MockResource;
import com.google.gwt.dev.resource.impl.FileResource;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.ClientBundle.Source;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.core.client.GWT;

public interface MainClientBundle extends ClientBundle
{
   @Source("LesJoursHeureux.otf")
   public FontResource myFont();

};

在我的 ui.xml 文件中，我包含了对字体资源的引用：

<ui:style type='com.example.TopMenuView.TopMenuViewStyle'>
    .maintitle {
        font-family: value('myFont.getFontName');
    }
</ui:style>

这是我不知道该做什么的地方。在我的 TopMenuView.java class 中，我包含了这个片段：

private static MainClientBundle MY_RESOURCES = GWT.create(MainClientBundle.class);
{
    MY_RESOURCES.myFont().ensureInjected();
}

当我尝试构建项目时，收到此错误：

Creating assignment for style()
     [java]  Performing substitution in node font-family : .....
     [java]  [ERROR] Could not find no-arg method named myFont in type com.example.TopMenuView_TopMenuViewUiBinderImpl_GenBundle

编辑：我使用的是 GWT SDK 2.6.0 版。

Answer 1

这是一个没有任何外部库的解决方案。

首先，在您的 MainClientBundle.java 中声明一个 DataResource:

@MimeType("application/font-sfnt") // use appropriate mime type depending on font file format
@Source("aller/aller_rg-webfont.ttf")
DataResource allerRegularTtf();

使用 GSS (GWT >= 2.7.0) 在 css 文件中导入 DataResource：

@def ALLER_REGULAR_TTF resourceUrl("allerRegularTtf");

或使用经典 CssResource (GWT < 2.7.0)：

@url ALLER_REGULAR_TTF allerRegularTtf;

在您的 .css 文件中，声明一个 @font-face 并使用它：

@font-face {
  font-family: "AllerRegular";
  src: ALLER_REGULAR_TTF format("truetype");
}

.myClass {
  font-family: "AllerRegular";
}

Answer 2

答案是最好的，但是，如果您不想弄乱 GWT 资源包，您可以将字体放在 war 目录中，然后放在 index.html定义字体：

<style type="text/css">
    @font-face {
        font-family: MyFont;
        src: url(myfont.ttf);
    }
</style>

然后您将字体系列设置为 MyFont（或您所称的任何字体）。例如：

myLabel.getElement().getStyle().setProperty("fontFamily", "MyFont");

在 Google Web Toolkit 中使用自定义字体

Using custom fonts with Google Web Toolkit

java

gwt