如何更改将级联的JavaFX 8 Modena主题中的BASE字体大小?

时间:2015-10-07 18:18:01

标签: css javafx-8

目前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中的所有字体大小,是否有一个简单的属性可以将基本字体设置为大于或小于其当前设置,允许所有其他间距,填充等进行缩放?

由于

1 个答案:

答案 0 :(得分:5)

如果您根据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);
    }
}

字体大小-test.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 ;
}

请注意,在此示例中移动滑块时,大小都会协调更改:文本大小,矩形大小,文本和矩形之间的间距以及包含标签的vbox周围的填充和矩形。

enter image description here

enter image description here