wake-up-neo.com

Wie kann ich die Schriftart von Webview in Android ändern?

Ich möchte die Standardschriftart von webview in eine benutzerdefinierte Schriftart ändern. Ich verwende Webview bei der Entwicklung einer zweisprachigen Browser-App für Android.

Ich habe versucht, eine Instanz einer benutzerdefinierten Schriftart zu erhalten, indem ich meine benutzerdefinierte Schriftart in Assets platziert habe. Die Standardschriftart von webview konnte jedoch nicht auf meine Schriftart eingestellt werden.

Das habe ich versucht:

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

Kann jemand dies korrigieren oder eine andere Methode vorschlagen, um die Standardschriftart von webview in eine benutzerdefinierte Schrift zu ändern?

Vielen Dank!

93
Dhanika

In diesem Projekt gibt es ein funktionierendes Beispiel dafür. Es läuft auf Folgendes hinaus:

  1. Platzieren Sie in Ihrem Ordner assets/fonts Die gewünschte OTF- oder TTF-Schriftart (hier MyFont.otf)
  2. Erstellen Sie eine HTML-Datei, die Sie für den WebView-Inhalt verwenden möchten, im Ordner assets (hier in 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. Laden Sie den HTML-Code aus dem folgenden Code in die WebView:

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

Beachten Sie, dass das Einfügen von HTML-Code über loadData() nicht zulässig ist. gemäß Dokumentation :

Beachten Sie, dass die gleiche Origin-Richtlinie von JavaScript bedeutet, dass ein Skript, das auf einer Seite ausgeführt wird, die mit dieser Methode geladen wurde, nicht auf Inhalte zugreifen kann, die mit einem anderen Schema als 'data' geladen wurden, einschließlich 'http (s)'. Um diese Einschränkung zu vermeiden, verwenden Sie loadDataWithBaseURL () mit einer geeigneten Basis-URL.

Wie @JaakL im folgenden Kommentar vorschlägt, sollten Sie zum Laden von HTML aus einer Zeichenfolge stattdessen die Basis-URL angeben, die auf Ihre Assets verweist:

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

Wenn Sie die Schriftart in htmlData referenzieren, können Sie einfach /fonts/MyFont.otf Verwenden (ohne die Basis-URL).

104
Paul Lammertsma

Ich benutze diesen 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);
94
Omid Omidi

Noch einfacher ist es, das Asset-URL-Format zu verwenden, um auf die Schriftart zu verweisen. Keine Programmierung nötig!

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

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

...

49
Dan Syrstad

Es kann in Android erfolgen. Ich habe drei Tage gebraucht, um dieses Problem zu lösen. Aber jetzt scheint es sehr einfach. Befolgen Sie diese Schritte, um eine benutzerdefinierte Schriftart für Webview festzulegen

1.Fügen Sie Ihre Schriftart zum Assets-Ordner hinzu
2.Kopieren Sie die Schriftart in das Dateiverzeichnis der Anwendung

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.Du musst die obige Funktion nur einmal aufrufen (du musst eine Logik dafür finden).

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

4.Verwenden Sie den folgenden Code, um den Wert für Ihre Webansicht festzulegen. Hier benutze ich CSS, um die Schriftart einzustellen.

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. Sie können die obige Funktion wie folgt aufrufen

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

ich habe dies durch obere Antworten mit diesen Ergänzungen gemacht:

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

und dann benutze 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>" : "");
}


Danke an Alle:)

12
V. Kalyuzhnyu

Viele der oben genannten Antworten haben ihren Reiz, wenn Sie Ihre Inhalte in Ihrem Assets-Ordner haben.

Wenn Sie jedoch möchten, dass ich alle Ihre Assets von einem Server auf Ihren internen Speicher herunterlade und dort speichere, können Sie stattdessen loadDataWithBaseURL verwenden und einen Verweis auf Ihren internen Speicher als baseUrl verwenden. Dann werden alle Dateien dort relativ zum geladenen HTML-Code gefunden und korrekt verwendet.

In meinem internen Speicher habe ich folgende Dateien gespeichert:

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

Dann benutze ich folgenden Code:

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

Die im obigen HTML-Code (style.css) verwendete CSS-Datei:

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

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

Ich habe dies nur versucht, während ich auf minSdkVersion 19 (4.4) abzielte, daher habe ich keine Ahnung, ob es auf anderen Versionen funktioniert

5
lejonl
 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);
3

Das Problem ist, dass es sich in einem Ordner befinden muss. Versuchen Sie stattdessen "./myfont.ttf", wenn die Schriftart nicht in einem Ordner in Assets wie "fonts/myfont.ttf" abgelegt wird, die mit Sicherheit funktionieren.

1
schwiz

Sie können es mit CSS tun. Ich habe es mit einer App gemacht, aber es funktioniert nicht in Android 2.1, da es einen bekannten Fehler mit Android Browser 2.1 gibt.

1
Jay Mayu

Sie müssen keine lokale ttf-Datei verwenden, um die Webview-Schriftart für Android festzulegen. Dadurch wird die gesamte App vergrößert.

sie können auch Online-Schriftarten wie Googles Schriftarten verwenden ... Dies hilft Ihnen, die Apk-Größe zu verringern.

Beispiel: Besuchen Sie die folgende URL https://Gist.github.com/karimnaaji/b6c9c9e819204113e9cabf290d580551#file-googlefonts-txt

Sie finden die notwendigen Informationen, um diese Schriftart zu verwenden. dann erstelle einen String wie unten

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

laden Sie dann die Webansicht wie folgt

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

getan. Auf diese Weise können Sie die Schriftart von der externen Quelle laden.

Was nun die App-Schriftart betrifft, ist es nicht sinnvoll, 1 Schriftart für die Webansicht und eine andere Schriftart für die gesamte App zu verwenden. Sie können also Downloadable Fonts in Ihrer App verwenden, die auch externe Quellen zum Laden von Schriftarten in die App verwendet.

0