JavaFX 中的彩色图标字体

Question

我有一个 JavaFX 应用程序，我想在其中使用一些图标。目前，我为特定字符串 a 字符解析所有可能包含图标的文本，例如“:icon:”，然后构建 TextFlow，在其中将匹配的关键字替换为图像。然后我只是将 TextFlow 显示为 Label/TextField/etc 中的图形。这对我来说感觉非常草率。有没有更好的解决方案？

我想使用自定义字体，用我想使用的少量图标替换几个 unicode 字符，但图标中必须有颜色。这是可以用字体完成的吗？我可以使用 CSS 为文本的特定字符着色吗？我是否走在正确的道路上？

Answer 1

您可能希望为此使用网络字体。

此示例使用Google Material design icons font。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.TextFlow;
import javafx.stage.Stage;

public class MixedTextAndIconFonts extends Application {
    @Override public void start(Stage stage) {
        Text i = new Text("I");
        Text love = new Text("\uE87D");
        Text u = new Text("you");
        i.setStyle("-fx-font-family: \'Indie Flower\'; -fx-font-size: 80; -fx-fill: forestgreen;");
        love.setStyle("-fx-font-family: \'Material Icons\'; -fx-font-size: 60; -fx-fill: firebrick;");
        u.setStyle("-fx-font-family: \'Indie Flower\'; -fx-font-size: 80; -fx-fill: forestgreen;");

        TextFlow textFlow = new TextFlow(
                i,
                love,
                u
        );
        textFlow.setStyle("-fx-padding: 20px; -fx-background-color: azure;");

        Scene scene = new Scene(textFlow);
        scene.getStylesheets().add("http://fonts.googleapis.com/css?family=Indie+Flower");
        scene.getStylesheets().add("http://fonts.googleapis.com/css?family=Material+Icons");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) { launch(args); }
}

对于一个快速示例，我将样式内联，但对于“真正的”应用，您可能会使用外部 CSS 样式表和有意义的常量名称来表示您希望包含的图标字形的 unicode 代码点。

更多资源

如果您搜索它们，网络上还有其他类似的资源可用，例如fontawesomefx、icon8 webfont conversion guide 和icomoon.io。