Comment changer la police de Webview Android?

Je veux changer la police par défaut de webview pour une police personnalisée. Je suis l'aide de webview dans le développement d'un bilinguisme navigateur app pour Android.

J'ai essayé d'obtenir une instance de la coutume de police en plaçant mes polices personnalisées dans les actifs. Mais ne pouvait toujours pas réglé webview la police par défaut de 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 ce ou suggérer une autre méthode pour changer webview la police par défaut à une police personnalisée?

Merci!

InformationsquelleAutor Dhanika | 2010-10-10
  1. 99

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

    1. Dans votre assets/fonts dossier, à l'endroit souhaité de la FTO ou de la police TTF (ici MyFont.otf)

    2. Créer un fichier HTML que vous pourrez utiliser pour la WebView du contenu, à l'intérieur de la assets dossier (ici à l'intérieur de 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. Charge le HTML dans la WebView de code:

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

    Prendre note que d'injecter de l'HTML par le biais de loadData() n'est pas autorisée. Selon les documents:

    Noter que le JavaScript de la même origine: un script qui s'exécute dans une page chargée à l'aide de cette méthode sera pas en mesure d'accéder au contenu chargé à l'aide de tout autre régime de "données", y compris " http(s)". Pour éviter cette restriction, l'utilisation loadDataWithBaseURL() avec une URL de base.

    Comme @JaakL suggère dans les commentaires ci-dessous, pour le chargement HTML à partir d'une chaîne, vous devez fournir l'URL de base de pointage à votre actif:

    webView.loadDataWithBaseURL("file:///android_asset/", htmlData);

    Lors de la référence à la police dans htmlData, vous pouvez simplement utiliser /fonts/MyFont.otf (en omettant l'URL de base).

    • LoadData() ne fonctionne pas, mais webView.loadDataWithBaseURL("file:///android_asset/",... fonctionne très bien. Puis aussi la police de référence de fichier comme "/fonts/MyFont.otf" devrait fonctionner.
    • cette juste a fonctionné pour moi .. merci @paul
    InformationsquelleAutor Paul Lammertsma
  2. 90

    Je suis en utilisant ce code :

    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);
    • C'est la bonne solution. Merci!!
    • OMG! C'est exactement CE qui nous a mis sur la piste de ce qui n'allait pas: comme il s'avère, Android 4.2 ne PAS rendre la police si vous ajoutez le "format ("ttf')" derrière le "; src: url('...')" la clause. Laisse cela et les polices sont magnifiquement rendus. Testé avec Google web fonts.
    • C'est à bascule solution, Thumbs up
    • son bon travail
    • loadDataWithBaseURL ne fonctionne pas sur android 4.1 et 4.2 versions 🙁
    • ne fonctionne pas pour moi en android 5.1 . J'ai utilisé (Dan Syrstad)'s réponse. la différence est devis font-family: 'myface';

    InformationsquelleAutor Omid Omidi
  3. 48

    Encore plus simple, vous pouvez utiliser l'Actif format d'URL de référence de la police. Aucune programmation n'est requise!

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

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

    ...

    • Si je place le .ttf et .html fichier dans le même répertoire et de le charger dans le navigateur Android, il fonctionne. Cependant, dans mon application WebView, tandis que le CSS montre, le texte s'affiche dans Android par défaut de la police, malgré l'ajout de la .ttf du projet assets/fonts dossier. Je suis en essais sur 2.3.5, mais la construction de, contre 2,1. Peut-être le problème, ou est-il quelque chose que je suis absent?
    • J'ai trouvé une solution: si vous créez un fichier HTML et de le placer dans les actifs, chargement par le view.loadUrl() œuvres, alors que view.loadData() ne le fait pas. Je n'ai aucune idée de pourquoi ce dernier ne l'est pas.
    • Un lil' fin, mais il fonctionne avec vue.loadDataWithBaseUrl(null, le contenu, le mime, enconding, null)
    • Celui-ci est agréable..
    • Cette réponse a fonctionné pour moi. Rapide et facile.
    InformationsquelleAutor Dan Syrstad
  4. 25

    Il peut être fait dans Android. J'ai pris trois jours pour résoudre ce problème. Mais maintenant, il semble très facile.
    Suivez ces étapes pour installer des polices personnalisées pour Webview

    1.Ajouter à votre police d'actifs dossier

    2.Copie de la police à la demande du répertoire des fichiers de

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

    3.Vous devez appeler la fonction ci-dessus qu'une seule fois (vous devez trouver un peu de logique pour cette).

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

    4.Utilisez le code ci-dessous à la valeur définie pour votre webview. Ici, je suis en utilisant 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 ci-dessous

    webview.loadDataWithBaseURL(null, getHtmlData(activity,htmlData) , "text/html", "utf-8", "about:blank");
    • Salut! J'ai essayé cette démarche, mais la WebView ne fonctionne toujours pas à charger ma police. Est-il quelque chose de spécial que vous n'? Merci!
    • comment faire pour html stackoverflow.com/q/5868198/501859. m'aider si u ont la solution
    • +1 tour de nice. je suis sur le point de dire à mon client, il est impossible
    • Vraiment merci pour la réponse
    • ne fonctionne pas sur android 4.0.4
    • Il Fonctionne pour moi.Grâce Binaire.
    • je vais avoir la police dans l'actif de dossier et de modification de css avec chemin d'accès complet de police et nom de famille dans le corps ,et après la modification, je suis à charger le contenu de nouveau, mais peut 't voir le changement de police en vigueur immédiatement

    InformationsquelleAutor binary
  5. 10

    j'ai fait cela par le haut-réponses avec cette ajouts:

    webView.loadDataWithBaseURL("file:///android_asset/",
                            WebClient.getStyledFont(someText),
                            "text/html; charset=UTF-8", null, "about:blank");

    et ensuite utiliser src: url("file:///android_asset/fonts/YourFont...

    public static String getStyledFont(String html) {
    boolean addBodyStart = !html.toLowerCase().contains("<body>");
    boolean addBodyEnd = !html.toLowerCase().contains("</body");
    return "<style type=\"text/css\">@font-face {font-family: CustomFont;" +
            "src: url(\"file:///android_asset/fonts/Brandon_reg.otf\")}" +
            "body {font-family: CustomFont;font-size: medium;text-align: justify;}</style>" +
            (addBodyStart ? "<body>" : "") + html + (addBodyEnd ? "</body>" : "");
}

    merci à tout le monde:)

    • Réponse Parfaite!!
    • merci
    InformationsquelleAutor V. Kalyuzhnyu
  6. 4

    De nombreuses réponses ci-dessus, de travail, se trouve un charme si vous avez votre contenu dans votre dossier des actifs.

    Toutefois, si vous avez comme moi envie de télécharger et de sauvegarder toutes vos actifs à partir d'un serveur vers votre espace de stockage interne, vous pouvez à la place utiliser loadDataWithBaseURL et l'utilisation d'une référence à votre espace de stockage interne comme le baseUrl. Ensuite, tous les fichiers, il y aura par rapport à la chargé html et sont trouvés et utilisés correctement.

    Dans mon stockage interne, j'ai enregistré les fichiers suivants:

    • IndigoAntiqua2Text-Régulier.ttf
    • style.css
    • image.png

    Puis-je utiliser le code suivant:

    WebView web = (WebView)findViewById(R.id.webby);
//For avoiding a weird error message
web.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

String webContent = "<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><link rel=\"stylesheet\" href=\"style.css\"></head>"
                            + "<body><img src='image.png' width=\"100px\"><div class=\"running\">I am a text rendered with INDIGO</div></body></html>";

String internalFilePath = "file://" + getFilesDir().getAbsolutePath() + "/";
web.loadDataWithBaseURL(internalFilePath, webContent, "text/html", "UTF-8", "");

    Le fichier CSS utilisé dans le html ci-dessus (style.css):

    @font-face {
  font-family: 'MyCustomRunning';
  src: url('IndigoAntiqua2Text-Regular.ttf')  format('truetype');
}

.running{
    color: #565656;
     font-family: "MyCustomRunning";
     font-size: 48px;
}

    Je ne l'ai essayé ce tout en ciblant minSdkVersion 19 (4.4) donc je n'ai aucune idée si ça fonctionne sur les autres versions

    InformationsquelleAutor lejonl
  7. 3
     webview= (WebView) findViewById(R.id.webview);
 String myCustomStyleString="<style type=\"text/css\">@font-face {font-family: MyFont;src: url(\"file:///android_asset/fonts/iranian_sans.ttf\")}body,* {font-family: MyFont; font-size: 13px;text-align: justify;}img{max-width:100%;height:auto; border-radius: 8px;}</style>";
 webview.loadDataWithBaseURL("", myCustomStyleString+"<div style=\"direction:rtl\">"+intentpost.getStringExtra("content")+"</div>", "text/html", "utf-8", null);
    • Efforcez-vous d'améliorer votre question en ajoutant une explication de ce que vous faites.
    InformationsquelleAutor Suport Pfrproject
  8. 1

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

    InformationsquelleAutor
  9. 1

    Le problème est qu'il doit être dans un dossier, essayez de le mettre "./myfont.ttf" au lieu de cela, pour ne pas mettre la police à l'intérieur d'un dossier dans des actifs comme "fonts/myfont.ttf" qui va travailler pour vous.

    InformationsquelleAutor schwiz
  10. -3

    C'est comment charger des htmlData dans une webview:

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

    où getHtmlData(activity,**htmlData**) renvoie une chaîne de code html.

    • Je ne vois pas ce que cela a à voir avec la question d'origine...
    InformationsquelleAutor Alex Aung