Question

我正在尝试创建图标按钮。我从flaticon.com下载了它们，并将它们导出为图标字体文件，其中包含一个TTF文件。

在我的css文件中，我将外部字体指定为：

@font-face {
  font-family: flaticon;
  src: url('/flaticon/flaticon.ttf');
}

我已经定义了一个应该使用这种字体的按钮类，如下所示：

.flaticon-button {
   -fx-font-size: 90px;
   -fx-font-family: flaticon;
   -fx-padding: 10px;
}

我的代码应用了如下的样式：

Button button = new Button("\ue000");
button.getStyleClass().add("flaticon-button");

但遗憾的是它没有显示预期的图标。当我在我的代码中加载字体并明确设置它时，会显示正确的图标：

Font font = Font.loadFont(this.getClass().getResource("/flaticon/flaticon.ttf").toExternalForm() , 90d);
Button button = new Button("\ue000");
button.setFont(font);

我显然忽略了一些小事，但尽管我在互联网上浏览了多少个例子，或者我盯着Oracle的CSS文档多长时间，我看不到它。

那么，我的CSS声明和用法有什么问题？

Answer 1

感谢rossum的评论，我意识到它可能与不解析类的URL有关，就像Class.getResource（）那样。

通过在主代码中加载字体，在代码引用之前，似乎已经解决了。我想没有别的办法，但对我来说似乎有点黑客。

CSS未应用外部字体

1 个答案: