web-dev-qa-db-fra.com

Comment utiliser une police personnalisée avec WebView

Maintenant, je veux afficher certains caractères Unicode et j'ai utilisé la balise: <font face=" Arial">something here</font>. Mais il semble que WebView ne trouve pas la police Arial car je ne peux voir que les caractères UFO. Dois-je copier arial.ttf quelque part ou comment puis-je utiliser cette police TrueType avec WebView? Merci.

androidwebviewcustom-font
58
user164542

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

Cela a fonctionné 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';}

Utilisez ensuite le chemin des ressources comme URL de base:

loadDataWithBaseURL("file:///Android_asset/",myhtml,"text/html","utf-8",null);
77
App8ite

Apparemment, vous pouvez utiliser une police personnalisée pour WebView, comme l'a suggéré @raychung ci-dessus. Mais cela ne fonctionnera pas pour 2.1 (Un bug est signalé ici ). Cela devrait fonctionner pour 1.5, 1.6 et 2.2.

Vous pouvez mettre votre fichier TTF de police personnalisé dans votre /assets dossier, 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 désormais référencer ce style de police dans votre fichier HTML.

34
Zarah

J'ai utilisé le code ci-dessous pour la direction rtl avec la police persane, j'espère que quelqu'un a utilisé ce code ou que quelqu'un m'a suggéré 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
Mohsen Abdollahi
@font-face {
 font-family: 'MyCustomFont';
 src: url('/assets/fonts/MaycustomFont.ttf') 
}

Ça marche pour moi.

->src
->assets
   ->fonts
      ->MaycustomFont.ttf
->..
->res
3
Benna

Vous pouvez le faire fonctionner sur toutes les versions en copiant le fichier de police de vos actifs dans votre dossier de fichiers lors du premier lancement de l'application, puis en le référençant comme:

"@font-face {
 font-family: cool_font;
 src: url('file://"+ getFilesDir().getAbsolutePath() 
  + "/cool_font.ttf');
}"
3
Felipe Martinez Carreño

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
David R.

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

Placez vos fichiers de polices 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";

J'espère que cela aide quelqu'un!

Si vous souhaitez conserver la taille de police de votre code html supprimer

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

Gardez à l'esprit que 1rem équivaut à environ 14sp

2
TibiG

L'idée de base est que la page Web doit avoir accès au fichier de police. C'est pourquoi la solution d'origine suggérée fonctionne lorsque le fichier HTML et le fichier de police se trouvent dans le dossier d'actifs 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 de fichiers devrait également fonctionner, si le fichier de police est vraiment là et que le chemin d'accès correct est donné dans le style. Mais l'approche est plus compliquée, il faut écrire du code pour copier le fichier, puis du code pour déterminer l'emplacement du fichier.

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

webView.loadUrl("file:///Android_asset/content.html");
1
Alex

Comme Felipe Martinez Carreño l'a dit, vous pouvez copier à partir d'actifs et cela fonctionnera.

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

1
binary

utiliser css

    @ font-face {
 font-family: cool_font; 
 src: url ('cool_font.ttf'); 
}
0
raychung