使用 JavaFX 8 和 css 加载自定义字体答案

【问题标题】：Loading custom font using JavaFX 8 and css使用 JavaFX 8 和 css 加载自定义字体
【发布时间】：2015-07-04 02:40:57
【问题描述】：

问题

我正在为我的应用程序创建一个以 Super Mario 为主题的 css 样式表，并且我想将我的按钮字体更改为名为 Press Start 2P 的自定义字体，这是 NES Mario 游戏中使用的像素化字体。但是，由于某些奇怪的原因，我的应用程序没有加载字体。

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 信息：无法加载@font-face 字体 [file:/C:/Users/Ahmad%20El-Baher/Documents/Programming/Java/Integrative%20Project%20Semester%204/trunk/build/classes/res/styles/PressStart2P .ttf]

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

【问题讨论】：

请记住，如果您的 css 文件位于文件夹 (Styles) 中，那么如果 .ttf 位于 Styles 文件夹中，则您的代码将起作用。否则，您必须通过路径找到文件。例如，如果 .ttf 在文件夹 (Parent) 中，它是 Styles 的父文件夹，那么路径必须在 css(src: url("../PressStart2P.ttf"); 这(..) 意味着我去一个文件夹返回。这只是一个例子。
我的答案不是正确答案吗？
你好@Underbalanced！很抱歉让你和这里的其他人一起上吊。我记得我很久以前就解决了这个问题，但是我完全忘记了我提出的这个问题，所以我最近才记得当你发表评论时。不幸的是，我不记得我是如何解决这个问题的，所以我不知道如何处理我的这个问题......
@Underbalanced 顺便谢谢你的关心！ :)

标签： css javafx fonts javafx-8 custom-font

【解决方案1】：

我能够添加 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';
}

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

PS：但是打包后还是不行！

【讨论】：

【解决方案2】：

我知道有点晚了。但是对于那些仍然需要的人，我认为这里的问题是你的项目名称中有空格。尝试使用 IntegrativeProjectSemester4 重命名您的项目

【讨论】：

【解决方案3】：

请注意，以下内容仅适用于 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;
}

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

【讨论】：

使用与字体信息中相同的字体系列名称至关重要，否则 CSS 将不会使用该字体。

【解决方案4】：

查看您的 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');
}

【讨论】：

答案基于我曾经遇到的类似问题。面对这个问题的原因有很多，我的回答只是针对其中一种情况。不合理的反对票。