使用JavaFX 8和css加载自定义字体 [英] Loading custom font using JavaFX 8 and css

问题描述

问题

我正在为我的应用程序创建一个超级马里奥主题的CSS样式表，我想更改字体我的按钮到一个自定义的字体称为按下开始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 font [file：/ C：/Users/Ahmad%20El-Baher/Documents/Programming/Java/Integrative%20Project%20Semester%204/trunk/build/classes/res/styles/PressStart2P.ttf]

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

解决方案

请注意，以下仅适用于 Java版本> = 1.8u60

我遇到同样的问题。在 JavaFX 8中加载 CSS 的方法是设置字体文件，然后使用字体名称作为引用可以通过预览字体找到。

字体文件相对于 CSS 。我已经设置了字体的根目录，但你可以删除它，并保持每个节点的基础。

$ b

CSS代码

  @ font-face {
 src：url（freeuniverse2.ttf），
} 
 
 .root {
 -fx-background-color：grey; 
 -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; 
 
 
 
 
 
lockb 
 
字体文件预览（下面你可以看到真实字体名称）
 
 
  
 
The Problem

I'm creating a Super Mario themed css style sheet for my application, and I want to change the font of my buttons to a custom font called Press Start 2P, which is the pixelated font used in the NES Mario games. However, my application's not loading the font for some odd reason.

CSS code:
.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");
}
When I run the application, it gives me this message:

  
Apr 25, 2015 8:22:32 AM com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
      INFO: Could not load @font-face font [file:/C:/Users/Ahmad%20El-Baher/Documents/Programming/Java/Integrative%20Project%20Semester%204/trunk/build/classes/res/styles/PressStart2P.ttf]
How do I make my application load my font properly?
解决方案

  
Note that the below will work only with  Java versions >= 1.8u60
I was having the same issues. The way to load CSS in JavaFX 8 is by setting the font face file and then using the Font Name as reference which can be found by previewing the font. 

The font file is relative to the CSS. I have the root set with the font, but you can remove that and leave it per node based.

  
CSS code


@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;
}



  
Font File Preview(Below you can see the real Font Name)


                        
这篇关于使用JavaFX 8和css加载自定义字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！