web-dev-qa-db-ja.com

Android）のWebViewでres / fontのカスタムフォントを使用する

この質問で述べたのと同じように、WebViewにロードされたhtml文字列のフォントフェースを変更したいと思います。

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

違いは、アセットフォルダにフォントファイルを保存する古いアプローチを使用していないことですが、「XMLのフォント」で説明されているようにres/fontに保存しますAndroidフォントサポートドキュメント：

https://developer.Android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html

今、私は明らかに使用できません：

file:///Android_asset/fonts/my_font.otf

私は試した：

file:///Android_res/font/my_font.otf

res/fontフォルダー内のフォントへのパスを記述する他の多くの方法がありますが、どれも機能しません。

フォントがres/fontフォルダーに保存されている場合にhtml文字列をロードするWebViewにカスタムフォントファミリーを使用するにはどうすればよいですか？

//編集：

動作していない私の現在の実装は次のとおりです。

@BindingAdapter("loadData")
public static void loadData(WebView webView, String htmlData) {
    webView.loadDataWithBaseURL(null, htmlData, "text/html", "utf-8", null);
}

@BindingAdapter({"loadData", "fontFamily"})
public static void loadData(WebView webView, String htmlData, @FontRes int fontFamilyId) {
    TypedValue value = new TypedValue();
    ApplicationActivity.getSharedApplication().getResources().getValue(fontFamilyId, value, true);
    String fontPath = value.string.toString();
    File fontFile = new File(fontPath);

    String prefix = "<html>\n"
            +"\t<head>\n"
            +"\t\t<style type=\"text/css\">\n"
            +"\t\t\t@font-face {\n"
            +"\t\t\t\tfont-family: 'CustomFont';\n"
            +"\t\t\t\tsrc: url(\"file:///Android_res/font/"+fontFile.getName()+"\")\n"
            +"\t\t\t}\n"
            +"\t\t\tbody {\n"
            +"\t\t\t\tfont-family: 'CustomFont';\n"
            +"\t\t\t}\n"
            +"\t\t</style>\n"
            +"\t</head>\n"
            +"\t<body>\n";
    String postfix = "\t</body>\n</html>";

    loadData(webView, prefix + htmlData + postfix);
}
androidwebviewfontsfont-facecustom-font
11
1daemon1

試したところ、これはアセットからフォントをロードするのと同じように機能します。代わりに、リソースを指すようにベースURLを変更する必要があります。

HTMLの例

_<html>
<head>
    <style>
        @font-face {
            font-family: 'CustomFont';
            src: url('font/CustomFont.ttf');
        }
        #font {
            font-family: 'CustomFont';
        }
    </style>
</head>
<body>
    <p>No Font</p>
    <br />
    <p id="font">Font</p>
</body>
_

Webview#loadDataWithBaseURL(String, String, String, String, String)を使用し、_file://Android_res/_をベースURL（最初のパラメーター）として使用して、このHTMLをWebビューにロードします。

例：

_webview.loadDataWithBaseURL("file:///Android_res/", html, "text/html", "utf-8", null)
_

編集：

リリースビルドでproguardを使用している場合は、ProGuardプロセス中にRクラスの名前が変更されないようにルールを追加する必要があります。そうしないと、WebViewがフォントリソースを見つけることができません。詳細は この投稿 で見つけることができます

8
hibob

このようなカスタム解像度フォントを使用できます-

<head>
<style type="text/css">
    @font-face {
        font-family: MyFont;
        src: url("file:///res/font/myfont.ttf")
    }
    body {
        font-family: MyFont;
    }
</style>
1
Harsh

_res/font_ディレクトリからローカルフォントをロードすることができました。私の例では、イタリックのopensansをロードしたいと思います。

私の設定は次のとおりです。

  1. assetsディレクトリ内のcssファイル
  2. これを使用してフォントフェースを設定します
_    @font-face {
      font-family: 'opensans';
      src: url("file:///Android_res/font/opensans_italic.ttf")
    }

    body {
      font-family: 'opensans';
      font-weight: 400;
    }
_

  1. loadDataWithBaseUrlを使用してWebViewをロードします。次に例を示します。

    webView.loadDataWithBaseURL(null, yourHtmlContent, "text/html", "utf-8", null)

    しかし、私はこれを私のhtmlコンテンツの上部に持っています：_"<link rel='stylesheet' type='text/css' href='file:///Android_asset/mycss.css' />”_

    私はそれがあなたの場合にもうまくいくことを願っています。

編集：

これをproguard構成に追加して、リリースモードで機能するようにします。

_-keep class com.your.package.name.R$font { *; }_

1
Reza