Come cambiare il tipo di carattere di Webview in Android?

97

Voglio cambiare il carattere predefinito di webview in un carattere personalizzato. Sto usando webview per sviluppare un'app browser bilingue per Android.

Ho provato a ottenere un'istanza di carattere tipografico personalizzato inserendo il mio carattere personalizzato nelle risorse. Ma ancora non sono riuscito a impostare il carattere predefinito di WebView sul mio carattere.

Questo è quello che ho provato:

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

Qualcuno può correggerlo o suggerire un altro metodo per cambiare il carattere predefinito di Webview in un carattere personalizzato?

Grazie!

android  webview  font-face  custom-font 
— Dhanika
fonte
Alla fine ho capito che questo non può essere fatto.
— Dhanika
— Samuel
ciao hai trovato qualche soluzione per questa faccenda del font, sto provando per il font hindi stackoverflow.com/q/5868198/501859 . aiutami se hai la soluzione
— Kishore
@Dhanika come risolvere questo problema affrontando lo stesso problema.
— NagarjunaReddy
Si prega di fare riferimento a questo link carattere personalizzato impostato nel testo WebView .. stackoverflow.com/a/25692052/3921740[1] [1]: stackoverflow.com/a/25692052/3921740
— user3921740

Risposte:

111

C'è un esempio funzionante di questo in questo progetto . Si riduce a:

  1. Nella tua assets/fontscartella, posiziona il carattere OTF o TTF desiderato (qui MyFont.otf)

  2. Crea un file HTML che utilizzerai per il contenuto di WebView, all'interno della assetscartella (qui all'interno 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. Carica l'HTML nella WebView dal codice:

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

Tieni presente che loadData()non è consentito inserire l'HTML tramite . Come da documentazione :

Si noti che la stessa politica di origine di JavaScript significa che lo script in esecuzione in una pagina caricata utilizzando questo metodo non sarà in grado di accedere al contenuto caricato utilizzando uno schema diverso da "data", incluso "http (s)". Per evitare questa restrizione, utilizzare loadDataWithBaseURL () con un URL di base appropriato.

Come suggerisce @JaakL nel commento qui sotto, per caricare HTML da una stringa, dovresti invece fornire l'URL di base che punta alle tue risorse:

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

Quando si fa riferimento al carattere in htmlData, è quindi possibile utilizzare semplicemente /fonts/MyFont.otf(omettendo l'URL di base).

— Paul Lammertsma
fonte
10
LoadData () non funziona, ma webView.loadDataWithBaseURL ("file: /// android_asset /", ... funziona bene. Quindi dovrebbe funzionare anche il riferimento al file di font come "/fonts/MyFont.otf".
— JaakL
Nel mio caso, i dati vengono restituiti sotto forma di tag dall'editor ck (backend api) <div style = \ "text-align: center; \"> <span style = \ "background-color: transparent; \"> < font color = \ "# f20505 \" size = \ "5 \" face = \ "Comic Sans MS \"> Condividi il tuo feedback con noi <\ / font> <\ / span> Lo sto impostando come webview.loadData () ma non sta prendendo i caratteri, qualsiasi soluzione ??
— B.shruti
Comic Sans MS non è un font fornito da Android. Funzionerà solo se hai definito il tipo di carattere in CSS e fornito il file del carattere nelle risorse dell'applicazione.
— Paul Lammertsma
2
il mio carattere si trova nella res/fontcartella. Quale sarebbe il percorso allora? Ho provato file:///android_res/font/ma non sembra funzionare.
— Wirling
105

Sto usando questo codice :

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);
— Omid Omidi
fonte
2
OH MIO DIO! QUESTO è esattamente ciò che ci ha messo sulla scia di ciò che stava andando storto: a quanto pare, Android 4.2 NON rende il carattere se aggiungi il "formato ('ttf')" dietro "src: url ('... clausola ') ". Lascialo fuori e i caratteri sono resi magnificamente. Testato con i caratteri web di Google.
— Pascal Lindelauf
2
Questa è una soluzione eccezionale, Thumbs up
— Saad Bilal
loadDataWithBaseURL non funziona sulle versioni Android 4.1 e 4.2 :(
— Misha Akopov,
non ha funzionato per me in Android 5.1. Ho usato la risposta di (Dan Syrstad). la differenza è la citazionefont-family: 'myface';
— Mneckoee
52

Ancora più semplice, puoi utilizzare il formato URL risorsa per fare riferimento al carattere. Nessuna programmazione necessaria!

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

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

...

— Dan Syrstad
fonte
1
Se inserisco il file .ttfe .htmlnella stessa directory e lo carico nel browser Android, funziona. Tuttavia, nella WebView della mia app, mentre il CSS mostra, il testo appare nel carattere predefinito di Android nonostante l'aggiunta .ttfdi alla assets/fontscartella del progetto . Sto testando su 2.3.5, ma costruendo contro 2.1. Potrebbe essere questo il problema o c'è qualcosa che mi manca?
— Paul Lammertsma
1
Ho trovato una soluzione: se crei un file HTML e lo metti negli asset, caricandolo tramite view.loadUrl()lavori, mentre view.loadData()no. Non ho idea del perché quest'ultimo non lo faccia.
— Paul Lammertsma
4
Un po 'in ritardo, ma funziona con view.loadDataWithBaseUrl (null, content, mime, enconding, null)
— nostro
28

Può essere fatto su Android. Ho impiegato tre giorni per risolvere questo problema. Ma ora sembra molto facile. Segui questi passaggi per impostare il carattere personalizzato per Webview

1.Aggiungi il tuo carattere alla cartella delle risorse 2.Copia il carattere nella directory
dei file dell'applicazione

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.Devi chiamare la funzione sopra solo una volta (devi trovare una logica per questo).

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

4.Utilizzare il codice seguente per impostare il valore per la visualizzazione Web. Qui sto usando CSS per impostare il carattere.

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.È possibile chiamare la funzione di cui sopra come di seguito

webview.loadDataWithBaseURL(null, getHtmlData(activity,htmlData) , "text/html", "utf-8", "about:blank");
— binario
fonte
Ciao! Ho provato questo approccio ma WebView continua a non caricare il mio carattere. C'è qualcosa di speciale che hai fatto? Grazie!
— Zarah
come farlo per html stackoverflow.com/q/5868198/501859 . aiutami se hai la soluzione
— Kishore
Funziona per me Grazie Binary.
— Ravi Shanker Yadav
Sto avendo il carattere nella cartella delle risorse e sto cambiando CSS con il percorso completo del carattere e il nome della famiglia di caratteri nel corpo, e dopo la modifica sto caricando di nuovo il contenuto ma non riesco a vedere immediatamente l'effetto di cambio del carattere
— Ravi
13

L'ho fatto con le risposte superiori con queste aggiunte:

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

e poi usa 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>" : "");
}


Grazie a tutti:)

— Vlad
fonte
Risposta perfetta !!
— SANAT
6

Molte delle risposte di cui sopra funzionano sono un fascino se hai il tuo contenuto nella cartella delle risorse.

Tuttavia, se come me desideri scaricare e salvare tutte le tue risorse da un server nella tua memoria interna, puoi invece utilizzare loadDataWithBaseURLe utilizzare un riferimento alla tua memoria interna come baseUrl. Quindi tutti i file presenti saranno relativi all'html caricato e verranno trovati e utilizzati correttamente.

Nella mia memoria interna ho salvato i seguenti file:

  • IndigoAntiqua2Text-Regular.ttf
  • style.css
  • image.png

Quindi utilizzo il codice seguente:

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", "");

Il file CSS utilizzato nell'html sopra (style.css):

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

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

L'ho provato solo durante il targeting di minSdkVersion 19 (4.4), quindi non ho idea se funziona su altre versioni

— lejonl
fonte
6 
 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);
— Suport Pfrproject
fonte
2
Migliora la tua domanda aggiungendo una spiegazione di ciò che stai facendo.
— lifeisfoo
2

Non è necessario utilizzare il file ttf locale per impostare il carattere WebView per Android, aumenterà l'intera dimensione dell'app.

puoi anche utilizzare caratteri online come il carattere di Google ... Ti aiuterà a ridurre le dimensioni dell'apk.

Ad esempio: visita l'URL seguente https://gist.github.com/karimnaaji/b6c9c9e819204113e9cabf290d580551#file-googlefonts-txt

Troverai le informazioni necessarie per utilizzare questo carattere. quindi crea una stringa come di seguito

String font = "@font-face {font-family: MyFont;src: url(\"here you will put the url of the font which you get previously\")}body {font-family: MyFont;font-size: medium;text-align: justify;}";

quindi carica la visualizzazione web in questo modo

webview.loadDataWithBaseURL("about:blank", "<style>" +font+</style>" + "your html contnet here", "text/html", null, null);

fatto. Sarai in grado di caricare il carattere dalla fonte esterna in questo modo.

Ora, per quanto riguarda il carattere dell'app, non ha senso utilizzare 1 carattere per la visualizzazione Web e un carattere diverso per l'intera app. Quindi puoi utilizzare i caratteri scaricabili nella tua app che utilizza anche fonti esterne per caricare i caratteri nell'app.

— Afjalur Rahman Rana
fonte
1

Puoi farlo usando CSS. L'ho fatto con un'app ma non funzionerà in Android 2.1 poiché c'è un bug noto con il browser Android 2.1.

— Mayu Mayooresan
fonte
1

Il problema è che deve essere in una cartella, prova invece a mettere "./myfont.ttf", altrimenti metti il ​​carattere all'interno di una cartella in risorse come "fonts / myfont.ttf" che funzionerà di sicuro.

— Nathan Schwermann
fonte
0

provalo, lavora per me come un incantesimo:

   private void setResult() {

        String mimeType = "text/html;charset=UTF-8";
        String encoding = "utf-8";
        String htmlText = htmlPrivacy;

        String text = "<html><head>"
                + "<style type=\"text/css\">@font-face {font-family: MyFont;src: url(\"file:///android_asset/fonts/iy_reg.ttf\")}body{font-family: MyFont;color: #666666}"
                + "</style></head>"
                + "<body>"
                + htmlText
                + "</body></html>";

        webView.loadDataWithBaseURL(null, text, mimeType, encoding, null);
    }
— sana ebadi
fonte
0

Se stai inserendo caratteri res/fontcome me, puoi cambiare la directory come segue: -

@font-face {
     font-family: yourfont;
     src: url("file:///android_res/font/yourfont.ttf")
}
        
body {
     font-family: yourfont;
}
— Ibrahim Ali
fonte
0

Usa la libreria https://github.com/delight-im/Android-AdvancedWebView .

nei dati html:

<!doctype html>
<html>

<head>
<style type="text/css">
@font-face {
    font-family: MyFont;
    src: url("file:///android_asset/fonts/font1.ttf")
}
body {
    font-family: MyFont;
    font-size: medium;
    text-align: justify;
}
</style>
<meta http-equiv="Content-Type" content="text/html;  charset=utf-8">
<title>Title</title>
</head>

<body>

    ------ YOUR_CONTENT ------

</body>

</html>

in xml:

<im.delight.android.webview.AdvancedWebView
    android:id="@+id/advanced_web_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

in java:

advancedWebView = findViewById(R.id.advanced_web_view);
advancedWebView.loadHtml(htmlData, "text/html; charset=utf-8", "utf-8");
— Scarica Arman
fonte
-3

Ecco come caricare htmlData in una visualizzazione web:

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

dove getHtmlData(activity,**htmlData**)restituisce una stringa di codice html.

— Alex Aung
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.