webview のデフォルト フォントをカスタム フォントに変更したい。Android 用のバイリンガル ブラウザ アプリの開発に webview を使用しています。
カスタムフォントをアセットに配置して、カスタム書体のインスタンスを取得しようとしました。しかし、まだ webview のデフォルト フォントを自分のフォントに設定できませんでした。
これは私が試したものです：
Typeface font = Typeface.createFromAsset(getAssets(), "myfont.ttf");
private WebView webview;
WebSettings webSettings = webView.getSettings();
webSettings.setFixedFontFamily(font);
誰でもこれを修正したり、webview のデフォルト フォントをカスタム フォントに変更する他の方法を提案したりできますか?
ありがとう！
このプロジェクトには、これの実例があります。要約すると、次のようになります。
assets/fontsフォルダーに、目的の OTF または TTF フォント (ここでは MyFont.otf) を配置します。WebView のコンテンツに使用する HTML ファイルをassetsフォルダー内 (ここでは 内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>
コードから HTML を WebView にロードします。
webview.loadUrl("file:///android_asset/demo/my_page.html");
HTML を挿入することloadData()は許可されていないことに注意してください。ドキュメントに従って：
JavaScript の同一生成元ポリシーは、このメソッドを使用してロードされたページで実行されているスクリプトが、「http(s)」を含む「データ」以外のスキームを使用してロードされたコンテンツにアクセスできないことを意味することに注意してください。この制限を回避するには、適切なベース URL で loadDataWithBaseURL() を使用します。
以下のコメントで @JaakL が示唆しているように、文字列から HTML をロードするには、代わりにアセットを指すベース URL を指定する必要があります。
webView.loadDataWithBaseURL("file:///android_asset/", htmlData);
でフォントを参照するhtmlData場合は、単純に/fonts/MyFont.otf(ベース URL を省略して) を使用できます。
さらに簡単に、アセット URL 形式を使用してフォントを参照できます。プログラミング不要！
@font-face {
font-family: 'myface';
src: url('file:///android_asset/fonts/myfont.ttf');
}
body {
font-family: 'myface', serif;
...
アンドロイドでできます。この問題を解決するのに 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.上記の関数を一度だけ呼び出す必要があります（これにはいくつかのロジックを見つける必要があります）。
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.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>" : "");
}
みんなに感謝:)
上記の回答の多くは、コンテンツがアセットフォルダーにある場合に魅力的です。
ただし、すべてのアセットをサーバーから内部ストレージにダウンロードして保存したい場合は、代わりにloadDataWithBaseURL内部ストレージへの参照を baseUrl として使用および使用できます。次に、そこにあるすべてのファイルは、ロードされた html に関連し、正しく検出されて使用されます。
内部ストレージに次のファイルを保存しました。
次に、次のコードを使用します。
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 で使用される CSS ファイル (style.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) をターゲットにしているときにこれを試しただけなので、他のバージョンで動作するかどうかはわかりません
CSSを使えばできます。アプリで実行しましたが、Android ブラウザー 2.1 には既知のバグがあるため、Android 2.1 では機能しません。
これは、webview に htmlData をロードする方法です。
webview.loadDataWithBaseURL(null, getHtmlData(activity,**htmlData**) , "text/html", "utf-8", "about:blank");
wheregetHtmlData(activity,**htmlData**)は、html コードの文字列を返します。