按钮将字体大小更改为某些未指定的字体

Question

我有一些按钮。如果没有CSS，当您单击或悬停按钮时，它将保存按钮的字体大小。但是，如果我应用CSS，它将发生变化：

没有CSS

使用CSS

字体大小发生变化（如果我在FXML中未设置默认大小，则最高按钮具有默认字体大小），并且字体高度开始变小（可能在第二个gif中看到）

CSS：

.button {
  -fx-border-style: null;
  -fx-background-radius: 0;

  -fx-background-color: #560145;

  -fx-font-family: "Open Sans", "Open Sans", "Open Sans", "Open Sans";
  -fx-text-fill: white;
}

.button:hover {
  -fx-background-color: #87016c;
  -fx-text-fill: #e6e6e6;
}

.button:pressed {
  -fx-background-color: #4d0036;
  -fx-text-fill: #e6e6e6;
}


.button:disabled {
  -fx-opacity: 0.4;
  -fx-background-color: grey;
  -fx-text-fill: black;
}

FXML

  <Button layoutX="342.0" layoutY="329.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="164.0" text="Button">
     <font>
        <Font size="6.0" />
     </font>
  </Button>

在带按钮的Java代码中我什么也不做！仅CSS和FXML字体大小设置。

怎么了？

Answer 1

我不确定到底出了什么问题，但是您不应该结合使用Button属性和CSS来选择字体。

在CSS样式表中定义字体系列和字体大小应该可以正常工作。 （尽管-fx-font-family仅允许使用单个字符串。）

.button {
  -fx-border-style: null;
  -fx-background-radius: 0.0;

  -fx-background-color: #560145;
  -fx-font-size: 6.0;
  -fx-font-family: "Open Sans";
  -fx-text-fill: white;
}

...

或者使用内联CSS来更改按钮的字体大小：

<Button layoutX="342.0" layoutY="329.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="164.0" text="Button" style="-fx-font-size: 6;"/>

，然后从CSS样式表中删除-fx-font-size属性。

Answer 2

更改高度求解器添加

-fx-background-insets: 0 0 0 0, 0, 1, 2;

在“按钮”部分。