css - 如何更改将级联出来的 JavaFX 8 Modena 主题中的 BASE 字体大小？

Question

目前，Modena 主题使用系统默认的 12 磅字体大小，除非字体大小已被缩放。

根据 CSS 文件本身的注释:

RESIZING FOR DIFFERENT SCREEN DPI
-------------------------------

When the screen DPI changes Windows will use a different font size by default. 
The default is 12px and can change to 15px or 18px depending on user 
preference or screen DPI. On Mac the default is 13px and embedded will depend 
on hardware. To make UI controls scale and be the right proportions for each of 
these font sizes we base the padding (which controls size of control) on the 
font size. This is done using the CSS measurement unit of a "em" where
(1em = font size). The default sizes are based on Windows default of 12px, as
a quick reference here are common px sizes in em units on windows.

Windows 12px -> em units    -> Mac 13px      | 
----------------------------------------
     1px     -> 0.083333em  -> 1.08px ~ 2px
     2px     -> 0.166667em  -> 2.16px ~ 3px
     3px  = 0.25em
     4px  = 0.333333em
     5px  = 0.416667em
     6px  = 0.5em
     7px  = 0.583333em
     8px  = 0.666667em
     9px  = 0.75em
    10px  = 0.833333em
    11px  = 0.916667em
    12px  = 1em

无需更改 CSS 中的所有字体大小，是否有一个简单的属性可以将基本字体设置为大于或小于当前设置，从而允许所有其他间距、填充等缩放？

谢谢

Answer 1

如果您根据 em 定义尺寸，那么它们将被定义为字体大小的比例。然后有类似的东西

.root {
  -fx-font-size: 15pt ;
}

在外部样式表中将更改 1em 的定义，从而改变填充的大小等。

如果您想从 Java 动态更改字体大小，您可以执行以下操作

DoubleProperty fontSize = new SimpleDoubleProperty(12); // font size in pt
root.styleProperty().bind(Bindings.format("-fx-font-size: %.2fpt;", fontSize));

SSCCE:

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Region;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class FontSizeTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        Label label = new Label("Some text");
        Region rect = new Region();
        rect.getStyleClass().add("rect");
        VBox vbox = new VBox(label, rect);
        vbox.getStyleClass().add("vbox");

        Slider slider = new Slider(6, 24, 12);


        BorderPane root = new BorderPane(vbox, null, null, slider, null);
        BorderPane.setMargin(slider, new Insets(10));
        BorderPane.setAlignment(slider, Pos.CENTER);

        root.styleProperty().bind(Bindings.format("-fx-font-size: %.2fpt;", slider.valueProperty()));

        Scene scene = new Scene(root, 400, 400) ;
        scene.getStylesheets().add("font-size-test.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

字体大小测试.css:

.rect {
    -fx-min-width: 1em ;
    -fx-max-width: 1em ;
    -fx-min-height: 1em ;
    -fx-max-height: 1em ;
    -fx-background-color: cornflowerblue ;
}
.vbox {
    -fx-spacing: 1em ;
    -fx-padding: 1.5em ;
}

请注意，当您在此示例中移动 slider 时，大小都发生了协调变化:文本大小、矩形大小、文本和矩形之间的间距以及包含标签和矩形的 vbox 周围的填充。