在JavaFX CSS中指定外部字体

Question

在JavaFX应用程序中，是否可以使用CSS指定字体？我有一个FXML场景和相应的CSS文件。在Java代码中，可以使用setFont方法指定字体：

text.setFont(Font.loadFont("file:resources/fonts/SourceSansPro-Bold.ttf", 12));

我尝试了不同的写法，比如：

-fx-font-family: url("../fonts/SourceSansPro-Bold.ttf");

但它不起作用。

- syscreat

Answer 1

我使用应用程序代码和 CSS 结合使用外部字体进行样式设置。

我将 loadFont 调用放置在重写的 Application init 方法内，以确保在应用程序中发生任何事情之前它被调用。

Font.loadFont(CustomFontTest.class.getResource("TRON.TTF").toExternalForm(), 10);

为了使用字体，我在CSS中引用字体族：

.menu-bar {
    -fx-background-color: transparent;
    -fx-font-family: TRON;
    -fx-font-size: 40px;
}

.context-menu {
    -fx-font-family: TRON;
    -fx-background-color: transparent;
    -fx-font-size: 12px;
}

很好，CSS可以很好地调整字体大小。即使字体加载时大小为10，也能正确调整为CSS中指定的-fx-font-size大小。

通过在应用程序初始化期间加载Font并使用CSS对标签进行内联样式设置也可以正常工作：

Label testControl = new Label("TRON");
testControl.setStyle("-fx-font-family: TRON; -fx-font-size: 120;");

TRON字体是从dafont下载的，放置在CustomFontTest类所在的同一目录中，并由构建系统复制到构建输出目录中。

答案摘自我在"使用自定义字体"论坛帖子中的回答。

- jewelsea

---

我已经使用Font.loadFont(getClass().getResourceAsStream("TRON.TTF"), 10);让它工作了。 :) - Keith OYS

Answer 2

你离解决方案很近:

-fx-font-family: 'Helvetica', Arial, sans-serif;

尝试这个，它应该可以正常工作。

---

也许这可以帮助你？（我不是JavaFX专家）

https://forums.oracle.com/forums/thread.jspa?messageID=10107625

---

编辑：

加载您的字体：

@font-face {
    font-family: Delicious;
    src: url('Delicious-Roman.otf');
}

使用 -fx- 标签来设置字体：

-fx-font-family: 'Delicious';

- Andrea Turri

---

我的问题是关于外部字体的，因为我需要使用自己的字体，而不是使用用户系统上已安装的字体。 - syscreat

使用 @Font-face 加载字体，然后在 -fx-font-family 中放置您的字体名称。 - Andrea Turri

虽然我还没有测试过，但根据这个JavaFX跟踪问题的说法，@font-face支持预计会在JavaFX 8/JDK 8时期之前添加。 - jewelsea

@AndreaTurri 在我这里好像不起作用——在最新版本的JavaFX Scene Builder中进行了测试。你是如何测试的？ - XXL

@AndreaTurri 在JavaFX 2.2中不起作用！请参见jewelsea引用的JavaFX Jira问题以了解详细信息。澄清了这是仅适用于JavaFX 8的功能，并且没有计划将其回溯到2.2。请参见jewelsea的其他答案以获取在JavaFX 2.2中加载自定义字体的正确方法。 - void256

请记得在 CSS 中首先声明您的 @font-face，以使其正常工作！ - smac89

Answer 3

刚刚发现一个细节： 在JavaFX-8中，如果您想要同一字体的常规和粗体变体，您可以使用两个@font-face实例来指定它们。然后，您可以使用-fx-font-weight：bold;。

@font-face {
    font-family: 'Droid Sans';
    src: url('DroidSans.ttf');
}

@font-face {
    font-family: 'Droid Sans Bold';
    src: url('DroidSans-Bold.ttf');
}

.root {
    -fx-font-family: 'Droid Sans'; 
}

.table-row-cell:focused .text {
    -fx-font-weight: bold;
}

- rli

Answer 4

另一种方法是使用FileInputStream加载字体，这样就不需要使用css：

 @FXML
    private Label myLabel;

@Override
    public void initialize(URL arg0, ResourceBundle arg1){

Font myFont = null;

        try {
            myFont = Font.loadFont(new FileInputStream(new File("patch_to_font.ttf")), 10);
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }

        myLabel.setFont(myFont);

}

- RichardK

---

原始问题是关于如何在CSS中使用加载的字体。当然，您可以直接加载字体文件，但是您想如何在表单样式表中使用它呢？ - syscreat

哦，我的错。我在使用CSS中的自定义字体方面遇到了问题，所以这是我的替代解决方案。无论如何，你是对的 - 这与这个问题无关。 - RichardK

Answer 5

JavaFx CSS字体（导入.ttf文件）：

/* import fonts */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/OpenSans-Regular.ttf");
}
@font-face {
    font-family: "Open Sans Light";
    font-style: normal;
    font-weight: 300;
    src: url("/fonts/OpenSans-Light.ttf");
}
@font-face {
    font-family: "Open Sans Bold";
    font-style: normal;
    font-weight: 700;
    src: url("/fonts/OpenSans-Bold.ttf");
}
@font-face {
    font-family: "Open Sans ExtraBold";
    font-style: normal;
    font-weight: 900;
    src: url("/fonts/OpenSans-ExtraBold.ttf");
}

/* Set fonts */

.settings-name{
    -fx-font-size: 33px;
    -fx-font-family: "Open Sans Light";
    -fx-font-weight: 300;
    -fx-text-fill: #09f;
}

.settings-username{
    -fx-font-size: 19px;
    -fx-font-family: "Open Sans ExtraBold";
    -fx-font-weight: 900;
    -fx-text-fill: #09f;
}

- FxMax

Answer 6

您需要将 Font.ttf 文件放置在我们的 bin/<主应用程序>文件夹 中，其中包含您的应用程序的 .class示例。

- Tega Steve