使用JavaFX 8和CSS加载自定义字体

Question

问题

我正在为我的应用程序创建一个超级马里奥主题的CSS样式表，并且想要更改按钮的字体为名为Press Start 2P的自定义字体，这是NES马里奥游戏中使用的像素化字体。但是，由于某种奇怪的原因，我的应用程序无法加载此字体。

CSS代码：

.text
{
    -fx-font-family: "Press-Start-2P";
}

.button
{
    -fx-background-color: transparent;
    //-fx-text-fill: rgb(255, 255, 255);
}

@font-face
{
    font-family: Press-Start-2P;
    src: url("PressStart2P.ttf");
}

当我运行应用程序时，它会给我这个消息：

2015年4月25日上午8:22:32 com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged INFO: 无法加载@font-face字体 [file:/C:/Users/Ahmad%20El-Baher/Documents/Programming/Java/Integrative%20Project%20Semester%204/trunk/build/classes/res/styles/PressStart2P.ttf]

如何使我的应用程序正确加载字体？

- gameCoder95

---

请注意，如果您的CSS文件在文件夹（Styles）中，则您的代码将在.ttf文件位于Styles文件夹中时起作用。否则，您必须按路径查找文件。例如，如果.ttf文件在（Parent）文件夹中，即Styles的父文件夹中，则路径必须在css（src：url（“../ PressStart2P.ttf”）;其中（..）表示我返回一个文件夹。这只是一个例子。 - GOXR3PLUS

我的回答不正确吗？ - Mr00Anderson

你好 @Underbalanced！非常抱歉让你和这里的所有人等待了这么久。我记得很久以前我已经解决了这个问题，但是我完全忘记了我提出这个问题，所以直到你评论时我才想起来。不幸的是，我不记得我是如何解决这个问题的，所以我不知道该怎么处理我的这个问题... - gameCoder95

@Underbalanced，顺便说一下，谢谢你的关心！ :) - gameCoder95

Answer 1

请注意，以下内容仅适用于Java版本>= 1.8u60。我遇到了同样的问题。在JavaFX 8中加载CSS的方法是设置字体文件，然后使用字体名称作为引用，可以通过预览字体找到该名称。字体文件相对于CSS文件而言。我已经将根节点设置为字体，但您可以删除它并根据每个节点保留它。

CSS代码

@font-face {
    src: url("freeuniverse2.ttf"),
}

.root {
    -fx-background-color: gray;
    -fx-font-family: "Free Universe 2";
}

#window {
    -fx-border-image-source: url("images/windowfill.png");
    -fx-border-image-slice: 17 6 13 6 fill;
    -fx-border-image-width: 17 6 13 6 ;
    -fx-background-color: gray;
}

.text {
    -fx-text-fill: white;
    -fx-font-size: 16px;
    -fx-font-family: "Free Universe 2";
    -fx-background-color: transparent;
}

.pane {
    -fx-border-image-source: url("images/windowfill.png");
    -fx-border-image-slice: 17 6 13 6 fill;
    -fx-border-image-width: 17 6 13 6 ;
    -fx-background-color: gray;
}

.vbox {
        -fx-border-image-source: url("images/windowfill.png");
    -fx-border-image-slice: 17 6 13 6 fill;
    -fx-border-image-width: 17 6 13 6 ;
    -fx-background-color: gray;
}

#title-text {
    -fx-text-fill: white;
    -fx-font-size: 36px;
    -fx-font-family: "Free Universe 2";
}

.label {
    -fx-text-fill: white;
    -fx-font-size: 16px;
    -fx-font-family: "Free Universe 2";
    -fx-background-color: transparent;
}

字体文件预览（下面您可以看到真正的字体名称）

- Mr00Anderson

---

使用与字体信息中相同的字体名称非常重要，否则CSS将无法使用该字体。 - M. le Rutte

Answer 2

请检查您的CSS文件和TTF文件是否在同一目录下。根据您的代码，src: url("PressStart2P.ttf");它们应该在同一目录下。

另外，请尝试替换

@font-face
{
    font-family: Press-Start-2P;
    src: url("PressStart2P.ttf");
}

使用

@font-face
{
    -fx-font-family: 'Press-Start-2P';
    src: url('PressStart2P.ttf');
}

- Dushyant Bangal

---

答案基于我曾经遇到过的类似问题。有很多原因会导致这个问题，我的回答只是针对其中一种情况。不应该给予负评。 - Dushyant Bangal

Answer 3

我知道可能有点晚了。但对于那些仍然需要的人，我认为问题在于您的项目名称中有空格。尝试将您的项目重命名为IntegrativeProjectSemester4。

- lala lala

Answer 4

我成功添加了Google字体。
举个例子，

/* TOP OF THE FILE */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?
family=Ranchers&display=swap');

.my-robot-label{
    -fx-font-family: 'Roboto';
}

.my-rancher-label{
    -fx-font-family: 'Ranchers';
}

注意：这是我成功添加外部字体的唯一方法。

附言：但仍然无法在打包后工作！

- Tharindu Sathischandra