Text 和 Labeled 控件结合 css 的不同行为

Question

我正在开发一个 Javafx 应用程序，我尝试添加一些标签、按钮和文本，它们会在用户调整场景大小时调整大小。所有节点都在 VBox 中，而 VBox 本身又在 StackPane 中。

我的测试应用：

public class Test extends Application 
{
    public static void main(String[] args) 
    {
        launch(args);
    }

    @Override
    public void start(final Stage primaryStage) 
    {           
        StackPane pane = new StackPane();
        VBox box = new VBox();
        box.setAlignment(Pos.CENTER);
        Label l = new Label("Label");
        Text t = new Text("Text");
        t.getStyleClass().add("test");
        Button b = new Button("Button");
        pane.heightProperty().addListener(listener ->
        {
            double h = pane.getHeight()/5;          
            l.setFont(Font.font(l.getFont().getFamily(), h));
            t.setFont(Font.font(t.getFont().getFamily(), h));
            b.setFont(Font.font(b.getFont().getFamily(), h));
        });
        
        box.getChildren().addAll(l, t, b);
        pane.getChildren().add(box);
        primaryStage.setScene(new Scene(pane));
        primaryStage.getScene().getStylesheets().add(Path.of("test.css").toUri().toString());
        primaryStage.show();
    }
}

如果我调整舞台的大小，它会按预期工作。但不幸的是，只有纯 Java 代码。因为添加我的 css 文件后，Labeled 控件的行为有所不同。虽然文本元素的大小继续发生变化，但标签和按钮的大小不会再发生变化。

我的 css 文件不起作用：

.label
{
   -fx-text-fill: red;
   -fx-font-family: impact;
}

.test
{
   -fx-fill: red;
   -fx-font-family: impact;
   -fx-font-size: 2em;
}

.button
{
   -fx-text-fill: red;
   -fx-font-size: 2em;
}

我问自己哪里做错了，测试了不同的css状态。我发现，当我在 css 中省略字体值时它起作用，否则它不起作用。因此，出现哪个字体值并不重要，只需要一个字体值就可以错过该行为。

我的 css 文件，有效：

.label
{
   -fx-text-fill: red;
   //-fx-font-family: impact;
}

.test
{
   -fx-fill: red;
   -fx-font-family: impact;
   -fx-font-size: 2em;
}

.button
{
   -fx-text-fill: red;
   //-fx-font-size: 2em;
}

1。问题：-已更改，见下文-

我是不是对 css 和 Javafx 有什么误解，还是我的 css 文件有问题或有错误？

2。问题：-已解决-

我是否需要使用 java 代码放置字体值，或者是否有其他添加字体的方法？

感谢您的帮助！

更新

按照建议，我学习了以下指南： https://openjfx.io/javadoc/14/javafx.graphics/javafx/scene/doc-files/cssref.html

JavaFX CSS 实现应用以下优先顺序：

The implementation allows designers to style an application by using style sheets to override property values set from code. For example, a call to rectangle.setFill(Color.YELLOW) can be overridden by an inline‑style or a style from an author stylesheet. This has implications for the cascade; particularly, when does a style from a style sheet override a value set from code? The JavaFX CSS implementation applies the following order of precedence: a style from a user agent style sheet has lower priority than a value set from code, which has lower priority than a Scene or Parent style sheet. Inline styles have highest precedence. Style sheets from a Parent instance are considered to be more specific than those styles from Scene style sheets.

在我的例子中，这意味着我将使用内联样式使其正确。

至此2.问题解决

但是，由于 父级样式 sheet > 代码设置的值，这也意味着，所有节点都不允许更改它们的大小，即使是文本节点.

因此我将第 1 个问题更改为：

Why does the JavaFX CSS order of precedence differ between Text and Controls

Answer 1

问题一：

这不是错误，而是优先级冲突。 .setFont() 的优先级低于 CSS。只需将 .setFont() 替换为 .setStyle()，示例将按您的计划运行：

l.setStyle("-fx-font-size:" + h + ";");
t.setStyle("-fx-font-size:" + h + ";");
b.setStyle("-fx-font-size:" + h + ";");

问题二：

尽量保留 CSS 中的所有样式。这是最佳实践。

Text 和 Labeled 控件结合 css 的不同行为

Different behavior of Text and Labeled controls in combination with css

css

controls

label

resize

javafx

1。问题：-已更改，见下文-

2。问题：-已解决-

更新

至此2.问题解决

因此我将第 1 个问题更改为：