css - Javafx 文本和标签字体看起来不同

Question

我试图让我的 Text 对象看起来像其他使用 Label 显示一些文本的 block 。我不能使用标签，因为我需要文本的功能来设置环绕宽度。但我看到了最终显示文本之间的直接区别。正如您从屏幕截图中看到的，Text 的字体看起来比 Label 的字体粗一点。如何设置我的文本样式使其看起来像标签？

我认为这只是我的样式表问题，但我可以在 SceneBuilder 中看到相同的差异。

Preview inside scenebuilder

Answer 1

在default style sheet , 标签中的文本颜色被设置为名为 -fx-text-background-color 的查找颜色(这是文本的前景色，尽管名称)，这又取决于查找的颜色 -fx-background(因此得名...)。 -fx-background 的值通常是从父级继承的；这里的想法是它使用与背景形成对比的颜色。该值定义为

-fx-text-background-color: ladder(
    -fx-background,
    -fx-light-text-color 45%,
    -fx-dark-text-color  46%,
    -fx-dark-text-color  59%,
    -fx-mid-text-color   60%
);

因此，您可以通过为文本的 -fx-fill 属性使用相同的 CSS 查找颜色，使文本看起来像标签。这是一个非常快速和肮脏的演示:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import javafx.stage.Stage;

public class TextColor extends Application {

    @Override
    public void start(Stage primaryStage) {
        Label plainLabel = new Label("A plain label");
        Text styledText = new Text("Styled text");
        styledText.setStyle("-fx-fill: -fx-text-background-color;");
        Text plainText = new Text("A plain text");

        VBox root = new VBox(10, plainLabel, styledText, plainText);
        root.setPadding(new Insets(10));
        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }

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

给出

这也使得 Text 对背景的变化做出适当的 react 。如果你添加

root.setStyle("-fx-background: black;");

然后样式文本(默认情况下是标签)响应:

另请注意，对于 Text 的用例，

的组合

label.setPrefWidth(...);
label.setWrapText(true);

将使您能够控制标签的环绕宽度，并且可能是比您在此处建议的方法更自然的解决方案。