Comment utiliser une police personnalisée avec WebView

maintenant je veux afficher quelques caractères unicode et j'ai utilisé l'étiquette: <font face=" Arial">something here</font> . Mais il semble que WebView ne peut pas trouver L'Arial font parce que je ne peux voir que les caractères OVNI. Est-ce que je dois copier arial.ttf à quelque part ou comment puis-je utiliser cette police TrueType avec WebView ? Grâce.

56
demandé sur Tofeeq 2009-08-28 02:25:49

10 réponses

loadData n'a pas fonctionné pour moi non plus, donc j'ai utilisé file:///android_asset dans le chemin src.

ça a marché avec loadDataWithBaseURL !

pour cet exemple j'ai changé le CSS en: 

@font-face {
    font-family: 'feast';
    src: url('fonts/feasfbrg.ttf');
}

body {font-family: 'feast';}

ensuite, utilisez le chemin des actifs comme url de base: 

loadDataWithBaseURL("file:///android_asset/",myhtml,"text/html","utf-8",null);
74
répondu App8ite 2012-09-18 05:43:22

apparemment, vous pouvez utiliser une police personnalisée pour WebView , comme @raychung ci-dessus suggéré. Mais cela ne fonctionnera pas pour 2.1 (Bug est rapporté ici ). Cela devrait fonctionner pour 1.5, 1.6 et 2.2.

vous pouvez mettre votre fichier de police TTF personnalisé dans votre dossier /assets , puis dans votre fichier CSS vous pouvez mettre: 

@font-face { 
    font-family: "myIPA"; 
    src: url('IPA.TTF'); 
}
.phon, .unicode
{
    display: inline;    
    font-family: 'myIPA', Verdana, sans-serif;  
    font-size: 14pt;
    font-weight: 500;
    font-style:normal;
    color: black;
}

vous pouvez maintenant faire référence à ce style de police dans votre fichier HTML.

34
répondu Zarah 2011-01-29 11:08:27

vous pouvez le faire fonctionner sur toutes les versions en copiant le fichier de police à partir de vos ressources à votre dossier de fichiers lors du premier lancement de l'application, puis référence comme: 

"@font-face {
 font-family: cool_font;
 src: url('file://"+ getFilesDir().getAbsolutePath() 
  + "/cool_font.ttf');
}"
3
répondu Felipe Martinez Carreño 2011-02-11 08:56:13 
@font-face {
 font-family: 'MyCustomFont';
 src: url('/assets/fonts/MaycustomFont.ttf') 
}

ça me va. 

->src
->assets
   ->fonts
      ->MaycustomFont.ttf
->..
->res
3
répondu Benna 2013-08-14 07:56:32

j'ai utilisé ci-dessous le code pour la direction de rtl avec police persan, j'espère que quelqu'un a utilisé ce code ou quelqu'un me suggère la meilleure façon. merci 

            String myCustomStyleString="<style type=\"text/css\">@font-face {font-family: MyFont;src: url(\"file:///android_asset/fonts/BYEKAN.ttf\")}body,* {font-family: MyFont; font-size: medium;text-align: justify;}</style>";
                    webView.loadDataWithBaseURL("", myCustomStyleString+"<div style=\"direction:rtl\">"+myHtm+"</div>", "text/html", "utf-8", null);
3
répondu Mohsen Abdollahi 2016-10-08 20:08:11

cela n'a pas fonctionné pour moi, j'ai dû lier la police sur mon serveur web au lieu d'utiliser la référence à un fichier local: 

   @font-face {
   font-family: 'feast';
   src: url('http://yoursite.com/tutorial/css/feasfbrg.ttf');
}

body {font-family: 'feast';}
2
répondu David R. 2011-08-31 09:52:55

cela fonctionne très bien pour moi sur tous les appareils sur lesquels je l'ai testé.

placez vos fichiers de police dans / src/main/assets / fonts, puis utilisez cette méthode: 

public class HTMLUtils {

    public static String getLocalFontInHTML(String html, String fontFamily, String fontFileName) {

      return "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            "<style>" +
            "@font-face {" +
            "font-family: " + fontFamily + ";" +
            "src: url('" + fontFileName + "');" +
            "}" +
            "* {font-family: '" + fontFamily + "' !important;}" +
            "* {font-size: 1rem !important;}" +
            "</style>" +
            "</head>\n" +
            "<body>\n" +
            html +
            "\n" +
            "</body>\n" +
            "</html>";
     }
}

comme suit 

webView.loadDataWithBaseURL("file:///android_asset/", HTMLUtils.getLocalFontInHTML(item.text, Config.FONT_FAMILY, Config.REGULAR_FONT),"text/html", "UTF-8", null);

où 

public static final String FONT_FAMILY = "Montserrat";

public static final String REGULAR_FONT = "fonts/Montserrat-Regular.otf";

Espère que cela aide quelqu'un!

si vous voulez garder la taille de la police de votre code html supprimer 

 "* {font-size: 1rem !important;}"

ont à l'esprit que 1rem est équivalent à environ 14sp

2
répondu TibiG 2018-01-11 15:01:04

comme Felipe Martinez Carreño dit que vous pouvez copier à partir des actifs et ça va marcher.

vous pouvez Vous référer ce pour plus de détails

1
répondu binary 2017-05-23 10:31:32

L'idée de base est que la page web doit avoir accès au fichier de police. C'est pourquoi la solution originale suggérée fonctionne lorsque le fichier HTML et le fichier font se trouvent dans le dossier assets, et que le fichier HTML est chargé à partir de là.

ce n'est pas une fonctionnalité Android, c'est CSS, donc devrait fonctionner avec N'importe quel SDK Android.

le chargement de la police à partir du dossier files devrait fonctionner aussi, si le fichier font est vraiment là et le chemin correct vers lui est donné dans le style. Mais tho approche est messier, il faut écrire le code pour copier le fichier, puis le code pour déterminer l'emplacement du fichier.

je suis très heureux d'avoir tout simplement le contenu HTML et le fichier de police dans les actifs, et de charger à partir de là. 

webView.loadUrl("file:///android_asset/content.html");
1
répondu Alex 2011-09-13 13:38:15

css 

    @font-face {
     font-family: cool_font;
     src: url('cool_font.ttf');
    }
0
répondu raychung 2011-05-04 15:48:17