Загрузка пользовательского шрифта с использованием JavaFX 8 и css

Проблема

Я создаю таблицу стилей css на тему Super Mario для своего приложения и хочу изменить шрифт своих кнопок на собственный шрифт под названием 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");
}

Когда я запускаю приложение, оно выдает мне это сообщение:

25 апреля 2015 г., 8:22:32 com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged INFO: не удалось загрузить шрифт @font-face [файл:/C:/Users/Ahmad%20El-Baher/Documents/Programming/Java /Integrative%20Project%20Semester%204/trunk/build/classes/res/styles/PressStart2P.ttf]

Как мне заставить мое приложение правильно загружать мой шрифт?


fonts css javafx javafx-8 custom-font
person gameCoder95    schedule 25.04.2015    source источник
comment
Имейте в виду, что если ваш файл css находится в папке (Styles), то ваш код будет работать, если .ttf находится в папке Styles. В противном случае вам нужно пройти путь, чтобы найти файл. Например, если .ttf находится в папке (Родительская), которая является родительской папкой стилей, тогда путь должен быть в css (src: url (../PressStart2P.ttf); что (..) означает, что я возвращаюсь на одну папку назад. Это просто пример.   -  person GOXR3PLUS    schedule 22.05.2016
comment
Разве мой ответ не был правильным ответом?   -  person Mr00Anderson    schedule 18.03.2017
comment
Привет @Underbalanced! Так что очень сожалею о том, что оставил вас, как и всех остальных здесь, в подвешенном состоянии. Я помню, что давно решил эту проблему, но я совершенно забыл об этом вопросе, который я задал, поэтому я вспомнил только недавно, когда вы прокомментировали. К сожалению, я не помню, как я решил эту проблему, поэтому я не знаю, что делать с этим моим вопросом...   -  person gameCoder95    schedule 21.03.2017
comment
@Underbalanced, кстати, спасибо за беспокойство! :)   -  person gameCoder95    schedule 21.03.2017

Ответы (4)


arrow_upward
18
arrow_downward

Обратите внимание, что нижеследующее будет работать только с версиями Java >= 1.8u60.

У меня были те же проблемы. Способ загрузки CSS в JavaFX 8 заключается в установке файла начертания шрифта, а затем использовании имени шрифта в качестве ссылки, которую можно найти при предварительном просмотре шрифта.

Файл шрифта относится к файлу 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;
}

Предварительный просмотр файла шрифта (ниже вы можете увидеть настоящее имя шрифта)

«Предварительный

person Mr00Anderson    schedule 22.05.2016
comment
Использование того же имени семейства шрифтов, что и внутри информации о шрифте, жизненно важно, иначе CSS не будет использовать шрифт. - person M. le Rutte; 22.01.2017

arrow_upward
0
arrow_downward

Посмотрите, находятся ли ваш файл 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');
}
person Dushyant Bangal    schedule 14.07.2015
comment
Ответ основан на аналогичной проблеме, с которой я столкнулся однажды. Есть много причин, по которым можно столкнуться с этой проблемой, мой ответ только для одного из сценариев. Понижение неоправданно. - person Dushyant Bangal; 22.05.2018

arrow_upward
0
arrow_downward

Я знаю, что уже поздно. Но для тех людей, которые все еще нуждаются, я думаю, проблема здесь в том, что у вас есть пробелы в имени вашего проекта. Попробуйте переименовать свой проект с помощью IntegrativeProjectSemester4.

person lala lala    schedule 20.03.2017

arrow_upward
0
arrow_downward

Мне удалось добавить Google Fonts.
Например,

/* 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: Но все равно это не будет работать после упаковки!

person Tharindu Sathischandra    schedule 18.09.2020