AndroidでWebviewのフォントを変更する方法は？

97

webviewのデフォルトフォントをカスタムフォントに変更したい。私はAndroid用のバイリンガルブラウザーアプリの開発にwebviewを使用しています。

カスタムフォントをアセットに配置して、カスタムタイプフェイスのインスタンスを取得してみました。しかし、それでもwebviewのデフォルトのフォントを私のフォントに設定できませんでした。

これは私が試したものです：

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

誰かがこれを修正したり、webviewのデフォルトフォントをカスタムフォントに変更する他の方法を提案したりできますか？

ありがとう！

android  webview  font-face  custom-font 
— ダニカ
ソース
最後に、これは実行できないことに気づきました。
— Dhanika
これをチェックしてください。stackoverflow.com/questions/1344080/…–
— サミュエル
こんにちは、このフォントフェースの問題に対する解決策を見つけました。私はヒンディー語フォントstackoverflow.com/q/5868198/501859を探しています。あなたが解決策を得たら私を助けてください
— Kishore
@Dhanika同じ問題に直面しているこの問題を解決する方法。
— NagarjunaReddy 2013年
WebViewのテキストに設定したカスタムフォントのためのこのリンクを参照してください。.. stackoverflow.com/a/25692052/3921740[1] [1]：stackoverflow.com/a/25692052/3921740
— user3921740

回答:

111

このプロジェクトには、この動作例があります。要約すると：

  1. あなたにはassets/fonts、フォルダ、場所希望OTFまたはTTFフォント（ここではMyFont.otf）

  2. assetsフォルダー内（ここではassets/demo/my_page.html）内に、WebViewのコンテンツに使用する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. コードからHTMLをWebViewにロードします。

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

HTMLの挿入loadData()は許可されていないことに注意してください。ドキュメントに従って：

JavaScriptの同じ生成元ポリシーは、このメソッドを使用してロードされたページで実行されているスクリプトが、「http」を含む「データ」以外のスキームを使用してロードされたコンテンツにアクセスできないことを意味することに注意してください。この制限を回避するには、適切なベースURLを指定してloadDataWithBaseURL（）を使用します。

以下のコメントで@JaakLが示唆しているように、文字列からHTMLをロードするには、代わりにアセットを指すベースURLを提供する必要があります。

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

でフォントを参照するときhtmlDataは、単純に/fonts/MyFont.otf（ベースURLを省略して）使用できます。

— ポール・ランメルツマ
ソース
10
loaddataの（）は動作しませんが、webView.loadDataWithBaseURL（ "ファイル：/// android_asset /"は、...罰金に動作します次に"/fonts/MyFont.otf"としても、フォントファイルの参照が動作するはずです。。
— JaakL
私の場合、データはckエディター（バックエンドapi）からタグの形式で返されます<div style = \ "text-align：center; \"> <span style = \ "background-color：transparent; \"> < font color = \ "＃f20505 \" size = \ "5 \" face = \ "Comic Sans MS \">フィードバックをお寄せください<\ / font> <\ / span>私はwebview.loadDataとして設定しています（）しかし、フォントを取らない、任意の解決策？
— B.shruti
Comic Sans MSは、Androidが提供するフォントではありません。CSSでフォントフェースを定義し、アプリケーションのアセットでフォントファイルを提供した場合にのみ機能します。
— Paul Lammertsma
2
フォントはres/fontフォルダにあります。その時の道は何でしょうか？試しましたfile:///android_res/font/がうまくいきません。
— Wirling
105

私はこのコードを使用しています：

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);
— オミドオミディ
ソース
2
ああ、神様！これがまさに、問題の原因を突き止めたものです。判明したように、Android 4.2は、「src：url（ '... '） "句。それを省くと、フォントが美しくレンダリングされます。Google独自のWebフォントでテストされています。
— Pascal Lindelauf 2014年
2
これは揺るぎない解決策です、いいね
— Saad Bilal
loadDataWithBaseURLがAndroid 4.1および4.2バージョンで機能しない:(
— Misha Akopov
Android 5.1では私にとってはうまくいきませんでした。（ダン・シルスタッド）の答えを使いました。違いは引用ですfont-family: 'myface';
— Mneckoee
52

さらに簡単なのは、アセットURL形式を使用してフォントを参照することです。プログラミングは必要ありません！

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

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

...

— ダンシルスタッド
ソース
1
私が置いた場合.ttfと.html同じディレクトリにファイルをし、Androidのブラウザでそれをロードし、それが動作します。ただし、私のアプリのWebViewでは、CSSが表示され.ttfている間、プロジェクトのassets/fontsフォルダーにを追加しても、テキストはAndroidのデフォルトフォントで表示されます。2.3.5でテストしていますが、2.1でビルドしています。それが問題なのでしょうか、それとも欠けているものはありますか？
— ポールランメルツマ、2011
1
私は解決策を見つけました：HTMLファイルを作成してアセットに配置した場合、view.loadUrl()作品を介してロードしますが、そうではありview.loadData()ません。なぜ後者がそうしないのか私には手がかりがありません。
— Paul Lammertsma、2011
4
少し遅れましたが、view.loadDataWithBaseUrl（null、content、mime、enconding、null）で動作します
— Ours
28

Androidで実行できます。この問題を解決するのに3日かかりました。しかし、今ではとても簡単に思えます。次の手順に従って、Webviewのカスタムフォントを設定します。

1.アセットフォルダー
にフォントを追加します2.フォントをアプリケーションのファイルディレクトリにコピーします

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.上記の関数を1回だけ呼び出す必要があります（このためのロジックを見つける必要があります）。

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

4.以下のコードを使用して、webviewの値を設定します。ここではCSSを使用してフォントを設定しています。

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.上記の関数を以下のように呼び出すことができます

webview.loadDataWithBaseURL(null, getHtmlData(activity,htmlData) , "text/html", "utf-8", "about:blank");
— バイナリ
ソース
こんにちは！この方法を試しましたが、WebViewでフォントが読み込まれません。何か特別なことはありますか？ありがとう！
— ザラ
html stackoverflow.com/q/5868198/501859でそれを行う方法。uが解決得た場合、私を助けて
— キショール
それは私のために働きます。バイナリをありがとう。
— Ravi Shanker Yadav
アセットフォルダーにフォントがあり、フォントの完全なパスと本文のフォントファミリー名でcssを変更しています。変更後、コンテンツを再度読み込んでいますが、フォント変更の効果がすぐに表示されません
— Ravi
13

私はこの追加で上の答えによってこれを行いました：

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

次に使用します 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>" : "");
}


みんなに感謝:)

— ヴラド
ソース
完璧な答え!!
— SANAT
6

上記の回答の多くは、コンテンツがアセットフォルダーにある場合は魅力的です。

ただし、私がすべてのアセットをサーバーから内部ストレージにダウンロードして保存したい場合は、代わりloadDataWithBaseURLにbaseUrlとして内部ストレージへの参照を使用できます。次に、そこにあるすべてのファイルがロードされたhtmlに関連し、正しく検出されて使用されます。

私の内部ストレージに次のファイルを保存しました：

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

次に、次のコードを使用します。

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

上記のhtml（style.css）で使用されるCSSファイル：

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

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

私はminSdkVersion 19（4.4）をターゲットにしているときにこれを試しただけなので、他のバージョンで動作するかどうかわかりません

— レジョン
ソース
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);
— サポートPfrproject
ソース
2
何をしているかの説明を追加して、質問を改善してください。
— lifeisfoo 2017
2

ローカルのttfファイルを使用してandroidのwebviewフォントを設定する必要はありません。アプリ全体のサイズが大きくなります。

グーグルのフォントのようなオンラインフォントを使用することもできます... apkのサイズを小さくするのに役立ちます。

例：以下のURLに アクセスしてくださいhttps://gist.github.com/karimnaaji/b6c9c9e819204113e9cabf290d580551#file-googlefonts-txt

このフォントを使用するために必要な情報が見つかります。次に、以下のような文字列を作成します

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

次に、このようにウェブビューをロードします

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

完了しました。この方法で外部ソースからフォントをロードできます。

アプリのフォントについてはどうでしょうか。WebViewに1つのフォントを使用し、アプリ全体に異なるフォントを使用しても意味がありません。そのため、アプリでフォントを読み込むために外部ソースを使用するアプリでダウンロード可能なフォントを使用できます。

— アフジャルラーマンラナ
ソース
1

CSSを使用してそれを行うことができます。私はアプリでそれを行いましたが、Androidブラウザー2.1には既知のバグがあるため、Android 2.1では機能しません。

— revs Mayu Mayooresan
ソース
1

問題は、それがフォルダーにある必要があることです。代わりに「./myfont.ttf」を入れてみてください。そうでない場合は、確実に機能する「fonts / myfont.ttf」などのアセットのフォルダー内にフォントを入れません。

— ネイサン・シュヴェルマン
ソース
0

それをテストし、魅力のように私のために働いてください：

   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);
    }
— サナ・エバディ
ソース
0

res/font私のようにフォントを配置する場合は、dirを次のように変更できます。

@font-face {
     font-family: yourfont;
     src: url("file:///android_res/font/yourfont.ttf")
}
        
body {
     font-family: yourfont;
}
— イブラヒムアリ
ソース
0

https://github.com/delight-im/Android-AdvancedWebViewライブラリを使用します。

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>

xmlで：

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

Javaで：

advancedWebView = findViewById(R.id.advanced_web_view);
advancedWebView.loadHtml(htmlData, "text/html; charset=utf-8", "utf-8");
— Armanダウンロード
ソース
-3

これは、webViewにhtmlDataをロードする方法です。

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

どこgetHtmlData(activity,**htmlData**)htmlコードの文字列を返します。

— アレックスアウン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.