css - 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 字体的底部与系统字体的底部对齐。

示例 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>