JavaFX CSS 字体系列未应用于 Xubuntu 16.04 中的标签控件

Question

问题

大家好，我已经设置了以下 JavaFX CSS 来处理 Label 控件以显示我的计算器应用程序的总和。

.label-sumtotal {
  -fx-font-family: "Noto Sans CJK SC Bold", Arial, sans-serif;
  -fx-text-fill: color-crimson;
  -fx-font-size: 32pt;
  -fx-font-weight: bold;
}

这是它在 Windows 和 Xubuntu 14.04

上的正确显示方式

这就是它在 Xubuntu 16.04

上的外观错误

---

到目前为止我在 Xubuntu 16.04 上测试过的内容

• 我更改为 Xubuntu 16.04 包含的另一个字体系列， 然而Label 仍然没有改变它的字体系列，也没有改变它的 字体粗细。

• 但是当我将控件从 Label 更改为 Text 而不触摸 任何 CSS 代码，然后以某种方式识别字体系列并 已申请。

---

我的问题

如何让Label 控件在Xubuntu 16.04 上显示字体系列？我不想使用Text 控件，因为它没有Label 那样的某些格式化功能。

Answer 1

我没有 Ubuntu 系统，但您可以尝试以下使用从 Web 加载的 Noto Sans SC Bold 字体（在 Mac 上适用于我）来设置标签样式。我在 Mac 上的输出与您说在 Windows 和 Xubunto 14.04 上正确的输出相同。

Noto Sans SC Bold 的 Google 网络字体参考：

• https://fonts.google.com/?query=noto+sans+sc&selection.family=Noto+Sans+SC:700

解决方案是从 Google 加载网络字体，而不是依赖应用或操作系统预先打包的字体。

从网页加载的字体版本指定为Noto+Sans+SC:700，所以字体已经加粗了，所以我没有在css中指定粗体，而是指定了一个" -fx-font-family 的 Noto Sans SC Bold" 值。您仍然可以拥有-fx-font-weight: bold;，然后您可能最终会使用双粗体字体，一次来自字体本身，然后再次来自粗细设置。在这种情况下，我必须在家族中使用“粗体”一词，否则将找不到它（这与 Google 在标准 HTML CSS 中使用网络字体的说明相反，它不需要“粗体”以名称）。

您还可以从 Google 下载字体为 .ttc 文件，并使用以下指定的解决方案从本地资源加载字体：

• How to embed .ttf fonts is JavaFx 2.2?

但是，我运行的 JavaFX 版本早于该功能所需的最低版本 9，因此我没有尝试使用嵌入字体。

我知道，很可能，您的未正确显示字体的 Xubuntu 系统必须已经在某个地方拥有它（否则在使用 Text 而不是 Label 时它将无法正确显示字体）。但是，在您描述的情况下，我不知道如何让它正确地为标签选择本地操作系统字体，这就是为什么我建议尝试使用 webfont 或嵌入字体。

示例 CSS

.label-sumtotal {
    -fx-font-family: "Noto Sans SC Bold";
    -fx-text-fill: crimson;
    -fx-font-size: 32pt;
}

网页字体示例应用

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class NotoFontApp extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        Label label = new Label("5,40\u20AC");
        label.getStyleClass().add("label-sumtotal");

        Pane layout = new StackPane(label);
        layout.setPadding(new Insets(10));
        Scene scene = new Scene(layout);
        scene.getStylesheets().add(
                NotoFontApp.class.getResource("font.css").toURI().toURL().toExternalForm()
        );
        scene.getStylesheets().add(
                "https://fonts.googleapis.com/css?family=Noto+Sans+SC:700&display=swap"
        );

        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}