web-dev-qa-db-ja.com

AndroidでWebviewのフォントフェイスを変更するにはどうすればよいですか？

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

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

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

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

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

ありがとう！

androidwebviewfont-facecustom-font
93
Dhanika

this project にこれの実例があります。要約すると：

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

loadData()を介してHTMLを挿入することは許可されていないことに注意してください。 ドキュメントによる ：

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

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

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

htmlDataのフォントを参照する場合、_/fonts/MyFont.otf_を使用できます（ベースURLを省略します）。

104
Paul Lammertsma

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

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

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

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

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

...

49
Dan Syrstad

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.以下のコードを使用して、Webビューの値を設定します。ここでは、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");
26
binary

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

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


みんなに感謝:)

12
V. Kalyuzhnyu

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

ただし、サーバーからすべての資産をダウンロードして内部ストレージに保存する場合は、代わりに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）をターゲットにしたときにのみこれを試したため、他のバージョンで動作するかどうかわかりません

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
Suport Pfrproject

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

1
schwiz

CSSを使用して実行できます。私はアプリでそれをしましたが、Android 2.1で動作しません。Android browser 2.1。

1
Jay Mayu

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

また、Googleのフォントなどのオンラインフォントを使用することもできます。これにより、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つのフォントを使用し、アプリ全体に異なるフォントを使用することは意味がありません。したがって、アプリでフォントをロードするために外部ソースも使用するアプリで ダウンロード可能フォント を使用できます。

0
Afjalur Rahman Rana