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

时间:2013-10-10 18:35:34

标签: css fonts javafx

在javafx程序中,我有一个标签,说:

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

我已被设计师要求更改字体系列,非常简单(我想):

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

问题是屏幕上显示的新字体带有奇数偏移,使文本看起来更高,从而弄乱了设计。

这是两个标签并排Output Example,左标签有Tahoma字体,看起来不错,而右标签有'HelveticaNeue'字体,远远高于基线。

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

<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属性相同的选项?

希望有人知道发生了什么事,谢谢先进。

1 个答案:

答案 0 :(得分:1)

建议的解决方案

您可能需要set a baseline alignment(例如Pos.BASELINE_LEFT),无论您的标签放在哪个容器内。

解释性图表

下图显示了两种不同的HBox,一种是淡蓝色,另一种是淡绿色。顶部框具有TOP_LEFT和BASELINE_LEFT底部的对齐方式。每个盒子里面都有两个30点字体的红色边框标签。每个框中的第一个标签是(Mac)系统字体,第二个标签是Helvetica。如您所见,当对齐在基线上时,Helvetica字体的底部与System字体的基础对齐。

fontdemo

样本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>