108 votes

Comment changer la police de Webview dans Android ?

Je veux changer la police par défaut du webview par une police personnalisée. J'utilise webview pour développer une application de navigation bilingue pour Android.

J'ai essayé d'obtenir une instance de la police personnalisée en plaçant ma police personnalisée dans les actifs. Mais je n'ai toujours pas pu définir la police par défaut de webview à ma police.

C'est ce que j'ai essayé :

Typeface font = Typeface.createFromAsset(getAssets(), "myfont.ttf"); 
private WebView webview;
WebSettings webSettings = webView.getSettings();
webSettings.setFixedFontFamily(font);

Quelqu'un peut-il corriger cela ou suggérer une autre méthode pour changer la police par défaut de webview par une police personnalisée ?

Merci !

118voto

Paul Lammertsma Points 12817

Il y a un exemple concret de ceci dans ce projet . Cela se résume à :

  1. Dans votre assets/fonts placez la police OTF ou TTF souhaitée (ici MyFont.otf).

  2. Créez un fichier HTML que vous utiliserez pour le contenu de la WebView, à l'intérieur de la balise assets (ici à l'intérieur assets/demo/my_page.html ):

    <html>
    <head>
    <style type="text/css">
    @font-face {
        font-family: MyFont;
        src: url("file:///android_asset/fonts/MyFont.otf")
    }
    body {
        font-family: MyFont;
        font-size: medium;
        text-align: justify;
    }
    </style>
    </head>
    <body>
    Your text can go here! Your text can go here! Your text can go here!
    </body>
    </html>
  3. Chargez le HTML dans le WebView à partir du code :

    webview.loadUrl("file:///android_asset/demo/my_page.html");

Notez que l'injection du HTML à travers loadData() n'a pas fonctionné pour moi. Je serais curieux de savoir si quelqu'un arrive à le faire fonctionner.

112voto

Omid Omidi Points 108

J'utilise ça :

wv = (WebView) findViewById(R.id.webView1);
String pish = "<html><head><style type=\"text/css\">@font-face {font-family: MyFont;src: url(\"file:///android_asset/font/BMitra.ttf\")}body {font-family: MyFont;font-size: medium;text-align: justify;}</style></head><body>";
String pas = "</body></html>";
String myHtmlString = pish + YourTxext + pas;
wv.loadDataWithBaseURL(null,myHtmlString, "text/html", "UTF-8", null);

53voto

Dan Syrstad Points 351

Plus simplement encore, vous pouvez utiliser le format Asset URL pour référencer la police. Aucune programmation n'est nécessaire !

@font-face {
   font-family: 'myface';
   src: url('file:///android_asset/fonts/myfont.ttf'); 
} 

body { 
   font-family: 'myface', serif;

...

29voto

binary Points 365

Cela peut être fait dans Android. J'ai mis trois jours à résoudre ce problème. Mais maintenant, cela semble très facile. Suivez ces étapes pour définir une police personnalisée pour Webview

1. ajouter votre police dans le dossier des actifs
2. copier la police dans le répertoire des fichiers de l'application

private boolean copyFile(Context context,String fileName) {
        boolean status = false;
        try { 
            FileOutputStream out = context.openFileOutput(fileName, Context.MODE_PRIVATE);
            InputStream in = context.getAssets().open(fileName);
            // Transfer bytes from the input file to the output file
            byte[] buf = new byte[1024];
            int len;
            while ((len = in.read(buf)) > 0) {
                out.write(buf, 0, len);
            }
            // Close the streams
            out.close();
            in.close();
            status = true;
        } catch (Exception e) {
            System.out.println("Exception in copyFile:: "+e.getMessage());
            status = false;
        }
        System.out.println("copyFile Status:: "+status);
        return status;
    }

Vous devez appeler la fonction ci-dessus une seule fois (vous devez trouver une logique pour cela).

copyFile(getContext(), "myfont.ttf");

Utilisez le code ci-dessous pour définir la valeur de votre webview. Ici, j'utilise le CSS pour définir la police.

private String getHtmlData(Context context, String data){
    String head = "<head><style>@font-face {font-family: 'verdana';src: url('file://"+ context.getFilesDir().getAbsolutePath()+ "/verdana.ttf');}body {font-family: 'verdana';}</style></head>";
    String htmlData= "<html>"+head+"<body>"+data+"</body></html>" ;
    return htmlData;
 }

5. vous pouvez appeler la fonction ci-dessus comme suit

webview.loadDataWithBaseURL(null, getHtmlData(activity,htmlData) , "text/html", "utf-8", "about:blank");

1voto

Jay Mayu Points 6095

Vous pouvez le faire en utilisant les CSS. Je l'ai fait avec une application mais cela ne fonctionnera pas sous Android 2.1 car il y a un bug connu avec le navigateur Android 2.1.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X