javafx root -fx-font-size和em大小调整 [英] javafx root -fx-font-size and em sizing

问题描述

我正在尝试使用root font-size和'em'值来调整布局元素的大小。看起来每当我触摸-fx-font-size属性时，root的字体大小将被重置为基值（1em = 12px）。

I'm trying to resize my layout elements using a root font-size and 'em' values. It looks like whenever I "touch" the -fx-font-size attribute, the root's font size is being reset to the base value (1em = 12px).

For简单的fxml：

For the simple 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

sample 1 is for root -fx-font-size = 10 sample 2 is for root -fx-font-size = 20

按钮1和3以及整体布局如预期，但在按钮2上，pref-width和pref-height被占用12乘以10或20.因此按钮2的大小始终为240x60 。

Button 1 and 3 as well as overall layout are as expectedd, but on button 2 pref-width and pref-height are being seized as multiplication of 12 instead of 10 or 20. So button 2 size is always 240x60.

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

Am I doing something wrong here or maybe someone knows a solution how to prevent root -fx-font-size "reset".

Bartek

推荐答案

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

Yes, it is the BUG by the the javafx.scene.CssStyleHelper, look at the the code-line 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。

It must be fixed under the https://bugreport.java.com/bugreport/submit_start.do, ID: 9055560.

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

As a workaround - to define -fx-font-size: XXXem; not in a .control-class, but deeply, for example in the .text-class, in your case:

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

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

Then the -fx-font-size: 2em; belongs only to the .text-class and doesn’t influence on the higher .textBigger-class.

这篇关于javafx root -fx-font-size和em大小调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！