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

Question

我想在Google Web Toolkit Web应用程序中使用自定义字体。我试过按照https://code.google.com/p/gwt-webfonts/提供的文档/代码，但我仍然遇到问题。我不完全明白我需要做什么。

我有：

1. 在我的项目中包含了gwt-webfonts-0.1.jar文件依赖项
2. 在我的gwt.xml文件中添加了一个include依赖项：
3. 创建了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();
   
   };

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

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

5. 这是我不知道该怎么做的地方。在我的TopMenuView.java类中，我包含了以下代码段：

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

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

   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

编辑：我正在使用版本2.6.0的GWT SDK。

Answer 1

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

首先，在你的DataResource中声明一个MainClientBundle.java：

@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）在qss文件中导入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

SPGs答案是最好的，但是，如果你不想搞乱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");