JavaFX：标签上某些字体的奇怪偏移

Question

在 javafx 程序中，我有一个标签，比如：

<Label style="-fx-font: 25px 'Tahoma';" text="Hello World!!" />

设计师要求我更改字体系列，很容易（我想）：

<Label style="-fx-font: 25px 'Algerian';" text="Hello World!!" />

问题是屏幕上显示的新字体有一个奇怪的偏移量，使文本看起来有点高，从而弄乱了设计。

这是两个标签并排的Output Example，左边标签有 Tahoma 字体，看起来不错，而右边标签有 'HelveticaNeue' 字体，比基线高很多。

我已经部分解决了这个问题，使用 Text 组件将 Label 组件替换为将 boundsType 属性设置为“VISUAL”而不是默认的“LOGICAL”。

<Text boundsType="VISUAL" style="-fx-font-family: 'Algerian'; -fx-font-size: 25px;" text="Hellow World!!" />

但是将整个系统的 Label 更改为 Text 组件并不好，并且按钮和其他组件中的标签存在相同的问题并且难以替代。

这些字体有问题吗？有些字体可以正常工作（Arial、Lucida Sans、MS Sans Serif），而其他字体则表现出这种行为（Algerian、Helvetica）。 我在操作系统上安装了这些字体，甚至可以在 MS Word 中使用它们而不显示这些偏移量。

Label 组件上是否有与 Text 组件的 boundsType 属性相同的选项？

希望有人知道发生了什么，在此先感谢。

Answer 1

建议的解决方案

您可能需要set a baseline alignment（例如Pos.BASELINE_LEFT）用于放置标签的容器。

说明图

下图显示了两个不同的 HBox，一个是淡蓝色，另一个是淡绿色。顶部框的对齐方式为 TOP_LEFT，底部为 BASELINE_LEFT。每个方框内都有两个 30 磅字体的红色边框标签。每个框中的第一个标签使用 (Mac) 系统字体，第二个标签使用 Helvetica。如您所见，当对齐在基线上时，Helvetica 字体的底部与 System 字体的底部对齐。

FXML 示例

这是一个 FXML 文件，您可以在 SceneBuilder 中加载该文件，以生成上面的图像。

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.Font?>

<StackPane id="StackPane" style="-fx-background-color: cornsilk;" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2">
  <children>
    <VBox alignment="TOP_LEFT" spacing="10.0">
      <children>
        <Label text="HBox Alignment - TOP_LEFT" />
        <HBox alignment="TOP_LEFT" spacing="5.0" style="-fx-background-color: lightblue;">
          <children>
            <Label style="-fx-border-color: red;" text="System">
              <font>
                <Font size="30.0" fx:id="x1" />
              </font>
            </Label>
            <Label style="-fx-border-color:red;" text="Helvetica">
              <font>
                <Font name="Helvetica" size="30.0" fx:id="x2" />
              </font>
            </Label>
          </children>
        </HBox>
        <Separator prefWidth="200.0" />
        <Label text="HBox Alignment - BASELINE_LEFT" />
        <HBox alignment="BASELINE_LEFT" spacing="5.0" style="-fx-background-color: palegreen;">
          <children>
            <Label font="$x1" style="-fx-border-color:red;" text="System" />
            <Label font="$x2" style="-fx-border-color:red;" text="Helvetica" />
          </children>
        </HBox>
      </children>
    </VBox>
  </children>
  <padding>
    <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
  </padding>
</StackPane>