javafx root -fx-font-size 和 em 大小调整

Question

我正在尝试使用根字体大小和“em”值来调整布局元素的大小。看起来每当我“触摸”-fx-font-size 属性时，根的字体大小就会被重置为基值(1em = 12px)。

对于简单的 fxml:

<BorderPane fx:id="mainStack" prefWidth="600" prefHeight="400" stylesheets="/style.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <left>
      <VBox fx:id="leftPane">
         <Button text="btn1"></Button>
         <Button text="btn2" styleClass="textBigger"></Button>
         <Button text="btn3"></Button>
      </VBox>
   </left>
</BorderPane>

和 css 类似:

.root {
    -fx-font-size: 10px;
    -fx-background-color: Lime;
}
#leftPane {
    /*-fx-font-size: 10px;*/
    -fx-background-color: Green;
    -fx-pref-width: 40em;
    -fx-spacing: 1em;
}
.button {
    -fx-background-color: Yellow;
    -fx-pref-height: 5em;
    -fx-pref-width: 20em;
}

#leftPane .textBigger {
    -fx-font-size: 1.5em;
}

示例 1 适用于 root -fx-font-size = 10示例 2 适用于 root -fx-font-size = 20

按钮 1 和 3 以及整体布局均符合预期，但按钮 2 上的 pref-width 和 pref-height 被捕获为 12 的乘积，而不是 10 或 20。因此按钮 2 的尺寸始终为 240x60。

我在这里做错了什么吗？有人知道如何防止 root -fx-font-size “重置”的解决方案吗？

Answer 1

是的，这是javafx.scene.CssStyleHelper的BUG，看代码行1388:

boolean isFontProperty = "-fx-font".equals(property) || "-fx-font-size".equals(property);

然后1392:

boolean isRelative = ParsedValueImpl.containsFontRelativeSize(resolved, isFontProperty);

和 1444:

// did we get a fontValue from the preceding block?
// if not, get it from our cacheEntry or choose the default
if (fontForFontRelativeSizes == null) {
    if (fontFromCacheEntry != null && fontFromCacheEntry.isRelative() == false) {
        fontForFontRelativeSizes = (Font)fontFromCacheEntry.getValue();
    } else {
        fontForFontRelativeSizes = Font.getDefault();
    }
}

它必须在 https://bugreport.java.com/bugreport/submit_start.do 下修复，ID:9055560。

作为解决方法 - 定义 -fx-font-size: XXXem;不在 .control-class 中，而是深入，例如在 .text-class 中，在您的情况下:

#leftPane .textBigger .text {
    -fx-font-size: 1.5em;
}

然后-fx-font-size: 2em;仅属于.text-class，不影响更高的.textBigger-class。