如何在 JavaFx 2.2 中嵌入 .ttf 字体? [英] How to embed .ttf fonts in JavaFx 2.2?

问题描述

首先，我在编码方面是个新手.我需要在我的基于 Java FXML 的应用程序中嵌入字体，但不知道该怎么做.我已将字体 fontName.ttf 粘贴到资源"中我的项目源根目录中的文件夹，即 App/src/app/resources.我已将组件(文本)的 CSS 设置为

#text {-fx-font-family: url(resources/fontName.ttf);}

我也尝试在 url 中添加引号，即 url("resources/fontName.ttf");，但它不起作用.我还为组件设置了 CSS id，所以这不是问题.有没有其他工作方式可以做到这一点?我见过 下载该字体.

CustomFontApp.java

import javafx.application.Application;导入 javafx.geometry.Pos;导入 javafx.scene.Scene;导入 javafx.scene.control.Label;导入 javafx.scene.image.*;导入 javafx.scene.layout.VBox;导入 javafx.scene.text.*;导入 javafx.stage.Stage;//演示自定义字体的使用.公共类 CustomFontApp 扩展应用程序 {公共静态无效主(字符串 [] args){ 启动(参数)；}@Override public void start(Stage stage) {stage.setTitle("波场概要");//加载 tron 字体.Font.loadFont(CustomFontApp.class.getResource("TRON.TTF").toExternalForm(),10);标签标题 = new Label("TRON");title.getStyleClass().add("title");Label caption = new Label("一部以另类现实为背景的科幻电影.");caption.getStyleClass().add("caption");标题.setMaxWidth(220);标题.setWrapText(真)；caption.setTextAlignment(TextAlignment.CENTER);VBox 布局 = 新 VBox(10);layout.setStyle("-fx-padding: 20px; -fx-background-color: silver");layout.setAlignment(Pos.CENTER);layout.getChildren().setAll(标题，新的图像视图(新图片(http://ia.media-imdb.com/images/M/MV5BMTY5NjM2MjAwOV5BMl5BanBnXkFtZTYwMTgyMzA5.V1.SY317.jpg")),标题);//布置场景.最终场景场景 = 新场景(布局)；scene.getStylesheets().add(getClass().getResource("custom-font-styles.css").toExternalForm());stage.setScene(场景)；舞台表演()；}}

custom-font-styles.css

/** 文件:custom-font-styles.css* 放置在与 CustomFontApp.java 相同的目录中*/.标题 {-fx-font-family:波场"；-fx-字体大小:20；}.标题 {-fx-font-family:波场"；-fx-字体大小:10；}

关于 FXML 的使用

Font.loadFont(url, size) 是一个带有两个参数的静态方法.我认为您不能从 FXML 调用 font.loadFont 并且如果可以的话不会建议它.相反，在加载需要字体的 FXML 或样式表之前，先在 Java 代码中加载字体(正如我在回答中所做的那样).

Firstly, I am quite a new guy in coding. I need to embed a font in my java FXML-based app and don't know how to do it. I have pasted the font, fontName.ttf in a "resources" folder in the root of the sources of my project, ie App/src/app/resources. I have set the CSS for the component (text) as

#text {
    -fx-font-family: url(resources/fontName.ttf);
}

I have also tried adding inverted commas in the url, ie url("resources/fontName.ttf");, but it doesn't work. I have also set the CSS id for the component, so that can't be the problem. Is there any other working way to do so? I have seen http://fxexperience.com/2010/05/how-to-embed-fonts/, but it doesn't work since I have JDK 1.7 u21. Any ideas for a correct way to embed fonts?

解决方案

Solution Approach

I updated the sample from Javafx How to display custom font in webview? to demonstrate using a custom true-type font in JavaFX controls styled using CSS.

Key points are:

1. Place the font in the same location as your application class and ensure your build system places it in your binary build package (e.g. application jar file).
2. Load the code font in your JavaFX code before you apply a style which uses it. Font.loadFont(CustomFontApp.class.getResource("TRON.TTF").toExternalForm(), 10);
3. To use the custom font in a style class use the -fx-font-family css attribute and just reference the name of the font (e.g. in this case "TRON").
4. Create and load a stylesheet which defines the style classes.
5. Apply style classes to your controls.

Additional Information

If you are using Java 8, you may be interested in Use web(Google) fonts in JavaFX.

Font Collections

If your font file is in .ttc format, containing multiple fonts in a single file, then use the Font.loadFonts API (instead of Font.loadFont). Note that Font.loadFonts is only available since JDK 9 and is not available in earlier releases.

Sample Output Using a Custom Font

Sample Code

The example relies on a TRON.TTF font which you can download from dafont.

CustomFontApp.java

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.image.*;
import javafx.scene.layout.VBox;
import javafx.scene.text.*;
import javafx.stage.Stage;

// demonstrates the use of a custom font.
public class CustomFontApp extends Application {
  public static void main(String[] args) { launch(args); }
  @Override public void start(Stage stage) {
    stage.setTitle("TRON Synopsis");

    // load the tron font.
    Font.loadFont(
      CustomFontApp.class.getResource("TRON.TTF").toExternalForm(), 
      10
    );

    Label title = new Label("TRON");
    title.getStyleClass().add("title");

    Label caption = new Label("A sci-fi flick set in an alternate reality.");
    caption.getStyleClass().add("caption");
    caption.setMaxWidth(220);
    caption.setWrapText(true);
    caption.setTextAlignment(TextAlignment.CENTER);

    VBox layout = new VBox(10);
    layout.setStyle("-fx-padding: 20px; -fx-background-color: silver");
    layout.setAlignment(Pos.CENTER);
    layout.getChildren().setAll(
      title,
      new ImageView(
        new Image(
          "http://ia.media-imdb.com/images/M/MV5BMTY5NjM2MjAwOV5BMl5BanBnXkFtZTYwMTgyMzA5.V1.SY317.jpg"
        )
      ),
      caption
    );

    // layout the scene.
    final Scene scene = new Scene(layout);
    scene.getStylesheets().add(getClass().getResource("custom-font-styles.css").toExternalForm());
    stage.setScene(scene);
    stage.show();
  }
}

custom-font-styles.css

/** file: custom-font-styles.css
 * Place in same directory as CustomFontApp.java 
 */

.title {
    -fx-font-family: "TRON";
    -fx-font-size: 20;
}

.caption {
    -fx-font-family: "TRON";
    -fx-font-size: 10;
}

On FXML Usage

Font.loadFont(url, size) is a static method taking two parameters. I don't think you can invoke font.loadFont from FXML and wouldn't advise it if you could. Instead, load the font in Java code (as I have done in my answer) before you load your FXML or style sheet which requires the font.

这篇关于如何在 JavaFx 2.2 中嵌入 .ttf 字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！