css - 设置不同大小的按钮文本行、css、javafx

Question

我用scenebuilder制作了一个按钮，里面有两行文字(第一行是按钮的功能，第二行是一些解释)，我想通过css为它们设置不同的大小。这是可能的，还是有更实用的方法来做到这一点？

感谢您的帮助。

Answer 1

你不能用像按钮文本那样的单个文本元素来实现这一点，但你可以添加一个 Label 作为 graphic 并通过 css 应用不同的文本大小:

@Override
public void start(Stage primaryStage) {
    Button btn = new Button("Text");
    Label explanation = new Label("This is the explanation");
    explanation.getStyleClass().add("explanation");
    btn.setGraphic(explanation);

    StackPane root = new StackPane();
    root.getChildren().add(btn);

    Scene scene = new Scene(root, 300, 300);
    scene.getStylesheets().add(getClass().getResource("explanation.css").toExternalForm());

    primaryStage.setScene(scene);
    primaryStage.show();
}

解释.css

.button {
    -fx-font-size: 20;
    -fx-content-display: bottom;
}

.button>.explanation {
    -fx-font-size: 10;
}