CSS message d'erreur en face de @font-face

Version imprimable

30/07/2019, 15h53
WipEout37

1 pièce(s) jointe(s)

CSS message d'erreur en face de @font-face

Bonjour à tous,

J'essaie de personnaliser une webview au niveau de la police. Mais je me heurte à un message d'erreur à côté de @font face et ma police ne se charge pas. En revanche aucun message d'erreur à l'exécution du programme. J'ai fait des recherches sur internet mais sans succès.

Pièce jointe 494532

En vous remerciant par avance.

Bien cordialement.

1 pièce(s) jointe(s)

hum pour l'erreur dans l'IDE, je dirai que c'est un soucis d'Eclipse. N'en tiens pas compte ; en tout cas IDEA ne m'affiche rien de similaire (idem pour NetBeans par le passe)

Dans mon cas j'ai mis le fichier de la police et le CSS dans le meme package que mon app.

Code:

1
2
3
4
5
6
7
8
9
@font-face {
    font-family: 'lelushka';
    src: url('Lelushka_Personal_use.otf');
}
 
.text-area {
    -fx-font-family: "lelushka";
    -fx-font-size: 2.1em;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
package font.css;
 
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TextArea;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
 
import java.net.URL;
import java.util.Optional;
 
public final class Main extends Application {
    public static void main(String... args) {
        launch(args);
    }
 
 
    @Override
    public void start(final Stage primaryStage) throws Exception {
        final var textArea = new TextArea();
        textArea.setWrapText(true);
        textArea.setText("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas erat imperdiet sed euismod nisi porta. Nulla facilisi morbi tempus iaculis urna id volutpat. Nisi lacus sed viverra tellus. Convallis a cras semper auctor neque vitae tempus quam pellentesque. Faucibus et molestie ac feugiat sed. Tempor nec feugiat nisl pretium fusce. Enim neque volutpat ac tincidunt vitae semper quis. Odio pellentesque diam volutpat commodo sed egestas. Non pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus. Nunc faucibus a pellentesque sit. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Pellentesque eu tincidunt tortor aliquam. Pretium viverra suspendisse potenti nullam ac. Nibh cras pulvinar mattis nunc. Aliquam nulla facilisi cras fermentum odio eu. Enim facilisis gravida neque convallis a.\n" +
                "\n" +
                "Aliquam purus sit amet luctus venenatis. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Nibh tortor id aliquet lectus proin nibh nisl condimentum. Neque sodales ut etiam sit. In fermentum posuere urna nec. Auctor augue mauris augue neque. Diam quis enim lobortis scelerisque fermentum. Sagittis orci a scelerisque purus semper eget duis. Eros in cursus turpis massa tincidunt dui ut ornare lectus. Neque laoreet suspendisse interdum consectetur libero id faucibus. Arcu dictum varius duis at consectetur lorem donec. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. Viverra mauris in aliquam sem fringilla ut morbi. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Volutpat blandit aliquam etiam erat. Tristique risus nec feugiat in fermentum posuere urna nec tincidunt. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Mattis rhoncus urna neque viverra justo nec ultrices dui. Pretium lectus quam id leo in vitae turpis massa sed.\n" +
                "\n" +
                "Eget nunc lobortis mattis aliquam faucibus purus in. Cras semper auctor neque vitae tempus quam pellentesque nec. Mauris cursus mattis molestie a iaculis at erat. Vehicula ipsum a arcu cursus vitae congue. Tincidunt ornare massa eget egestas. Praesent tristique magna sit amet purus. Venenatis tellus in metus vulputate eu scelerisque felis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed. Blandit massa enim nec dui. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Euismod lacinia at quis risus sed vulputate odio ut enim. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Massa placerat duis ultricies lacus sed. Interdum velit euismod in pellentesque massa placerat. Nibh praesent tristique magna sit amet. Eros donec ac odio tempor orci. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam. Facilisi cras fermentum odio eu feugiat. Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Imperdiet proin fermentum leo vel orci porta non.\n" +
                "\n" +
                "Dictum varius duis at consectetur lorem donec massa sapien faucibus. Scelerisque in dictum non consectetur a. Tincidunt dui ut ornare lectus sit amet. Mauris commodo quis imperdiet massa. In aliquam sem fringilla ut morbi tincidunt augue interdum. Purus faucibus ornare suspendisse sed. Morbi enim nunc faucibus a. Integer quis auctor elit sed vulputate mi sit amet. Purus in massa tempor nec feugiat nisl. Pretium nibh ipsum consequat nisl vel pretium lectus quam id. Eget aliquet nibh praesent tristique. Lacus vestibulum sed arcu non odio. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Platea dictumst quisque sagittis purus sit. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Amet purus gravida quis blandit turpis cursus in. Faucibus in ornare quam viverra orci sagittis eu volutpat odio.\n" +
                "\n" +
                "Lectus sit amet est placerat in egestas erat imperdiet. Sapien pellentesque habitant morbi tristique. Sed vulputate odio ut enim blandit volutpat. Pretium quam vulputate dignissim suspendisse. Odio tempor orci dapibus ultrices. Pharetra diam sit amet nisl suscipit adipiscing. Diam quam nulla porttitor massa. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Proin fermentum leo vel orci. Enim sit amet venenatis urna cursus eget. Duis convallis convallis tellus id interdum velit laoreet id. Augue mauris augue neque gravida in fermentum.");
        final var root = new StackPane(textArea);
        final var scene = new Scene(root);
        Optional.ofNullable(getClass().getResource("styles.css"))
                .stream()
                .map(URL::toExternalForm)
                .forEach(scene.getStylesheets()::add);
        primaryStage.setWidth(500);
        primaryStage.setHeight(500);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

Pièce jointe 494683

PS : pour WebView c'est plutot sur le contenu HTML qu'il faut mettre la police je pense plutot que sur le controle lui-meme. Donc il faut peut-etre plutot taper dans la feuille de style attachee au HTML (ou a son tag inline).

1 pièce(s) jointe(s)

Et pour une page web :

Code:

1
2
3
4
5
6
7
8
9
@font-face {
    font-family: 'lelushka';
    src: url('Lelushka_Personal_use.otf');
}
 
p {
    font-family: "lelushka";
    font-size: 2.1em;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="stylesweb.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Egestas erat imperdiet sed euismod nisi porta. Nulla facilisi morbi tempus iaculis urna id volutpat. Nisi
    lacus sed viverra tellus. Convallis a cras semper auctor neque vitae tempus quam pellentesque. Faucibus et molestie
    ac feugiat sed. Tempor nec feugiat nisl pretium fusce. Enim neque volutpat ac tincidunt vitae semper quis. Odio
    pellentesque diam volutpat commodo sed egestas. Non pulvinar neque laoreet suspendisse interdum consectetur libero
    id faucibus. Nunc faucibus a pellentesque sit. Ligula ullamcorper malesuada proin libero nunc consequat interdum.
    Pellentesque eu tincidunt tortor aliquam. Pretium viverra suspendisse potenti nullam ac. Nibh cras pulvinar mattis
    nunc. Aliquam nulla facilisi cras fermentum odio eu. Enim facilisis gravida neque convallis a.</p>
<p>Aliquam purus sit amet luctus venenatis. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate
    sapien. Nibh tortor id aliquet lectus proin nibh nisl condimentum. Neque sodales ut etiam sit. In fermentum posuere
    urna nec. Auctor augue mauris augue neque. Diam quis enim lobortis scelerisque fermentum. Sagittis orci a
    scelerisque purus semper eget duis. Eros in cursus turpis massa tincidunt dui ut ornare lectus. Neque laoreet
    suspendisse interdum consectetur libero id faucibus. Arcu dictum varius duis at consectetur lorem donec. Fringilla
    phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec. Viverra mauris in aliquam sem fringilla
    ut morbi. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Volutpat blandit aliquam etiam erat.
    Tristique risus nec feugiat in fermentum posuere urna nec tincidunt. Sit amet nulla facilisi morbi tempus iaculis
    urna id volutpat. Mattis rhoncus urna neque viverra justo nec ultrices dui. Pretium lectus quam id leo in vitae
    turpis massa sed.</p>
<p>Eget nunc lobortis mattis aliquam faucibus purus in. Cras semper auctor neque vitae tempus quam pellentesque nec.
    Mauris cursus mattis molestie a iaculis at erat. Vehicula ipsum a arcu cursus vitae congue. Tincidunt ornare massa
    eget egestas. Praesent tristique magna sit amet purus. Venenatis tellus in metus vulputate eu scelerisque felis.
    Fermentum iaculis eu non diam phasellus vestibulum lorem sed. Blandit massa enim nec dui. Nunc pulvinar sapien et
    ligula ullamcorper malesuada proin libero nunc. Euismod lacinia at quis risus sed vulputate odio ut enim. Sed cras
    ornare arcu dui vivamus arcu felis bibendum ut. Massa placerat duis ultricies lacus sed. Interdum velit euismod in
    pellentesque massa placerat. Nibh praesent tristique magna sit amet. Eros donec ac odio tempor orci. Vulputate odio
    ut enim blandit volutpat maecenas volutpat blandit aliquam. Facilisi cras fermentum odio eu feugiat. Neque aliquam
    vestibulum morbi blandit cursus risus at ultrices. Imperdiet proin fermentum leo vel orci porta non.</p>
<p>Dictum varius duis at consectetur lorem donec massa sapien faucibus. Scelerisque in dictum non consectetur a.
    Tincidunt dui ut ornare lectus sit amet. Mauris commodo quis imperdiet massa. In aliquam sem fringilla ut morbi
    tincidunt augue interdum. Purus faucibus ornare suspendisse sed. Morbi enim nunc faucibus a. Integer quis auctor
    elit sed vulputate mi sit amet. Purus in massa tempor nec feugiat nisl. Pretium nibh ipsum consequat nisl vel
    pretium lectus quam id. Eget aliquet nibh praesent tristique. Lacus vestibulum sed arcu non odio. Nulla facilisi
    etiam dignissim diam quis enim lobortis scelerisque fermentum. Platea dictumst quisque sagittis purus sit. Molestie
    ac feugiat sed lectus vestibulum mattis ullamcorper. Amet purus gravida quis blandit turpis cursus in. Faucibus in
    ornare quam viverra orci sagittis eu volutpat odio.</p>
<p>Lectus sit amet est placerat in egestas erat imperdiet. Sapien pellentesque habitant morbi tristique. Sed vulputate
    odio ut enim blandit volutpat. Pretium quam vulputate dignissim suspendisse. Odio tempor orci dapibus ultrices.
    Pharetra diam sit amet nisl suscipit adipiscing. Diam quam nulla porttitor massa. Fringilla phasellus faucibus
    scelerisque eleifend donec pretium vulputate sapien. Proin fermentum leo vel orci. Enim sit amet venenatis urna
    cursus eget. Duis convallis convallis tellus id interdum velit laoreet id. Augue mauris augue neque gravida in
    fermentum.");
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
package font.css;
 
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
 
import java.net.URL;
import java.util.Optional;
 
 
public class Main2 extends Application {
    public static void main(String... args) {
        launch(args);
    }
 
 
    @Override
    public void start(final Stage primaryStage) throws Exception {
        final var webView = new WebView();
        final var root = new StackPane(webView);
        final var scene = new Scene(root);
        Optional.ofNullable(getClass().getResource("test.html"))
                .stream()
                .map(URL::toExternalForm)
                .forEach(webView.getEngine()::load);
        primaryStage.setWidth(500);
        primaryStage.setHeight(500);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

Par contre on peut voir que, suivant la police, certains caracteres peuvent ne pas s'afficher (ici la virgule, le navigateur web -ici, Chrome- doit le remplacer par la police par defaut quand le glyphe est absent). Egalement que je j'ai rarement utilise des polices chiadee, c'est la 1ere fois que je me rend compte que le rendu des glyphes dans JavaFX est franchement bof pour ne pas dire degueulasse.

Pièce jointe 494684

31/07/2019, 05h34
WipEout37

Bonjour Bouye,

L'approche par le html était la bonne. Je l'avais tentée aussi auparavant via un css mais j'avais mal paramétré celui-ci. Cela fonctionne merci !

A noter que lorsque j'utilisais une webview sans fxml (directement une webview sans conteneur), j'utilisais ceci et cela fonctionnait.

Font.loadFont(Main.class.getResource("achemine_regular.ttf").toExternalForm(),6);

Avec l'approche FXML et une webview incluse dans un anchorpane, message d'erreur. Mais bon peu importe cela fonctionne via le html (webkit) et cela me va très bien.
01/08/2019, 00h52
Mickael_Istria

Pour le CSS avec Eclipse IDE, essaye ce plugin plutot que l'editeur par defaut: https://marketplace.eclipse.org/cont...nt-eclipse-ide
Pas sur que ca soit mieux pour JavaFX ceci dit, mais en general, il est plus a jour.
02/08/2019, 13h44
WipEout37

Bonjour ;)

Je te remercie pour le tuyau. Je vais l'essayer ;)

Bonne journée.