webview의 기본 글꼴을 사용자 정의 글꼴로 변경하고 싶습니다. Android 용 이중 언어 브라우저 앱을 개발하는 데 webview를 사용하고 있습니다.
사용자 지정 글꼴을 자산에 배치하여 사용자 지정 서체의 인스턴스를 얻으려고했습니다. 하지만 여전히 webview의 기본 글꼴을 내 글꼴로 설정할 수 없습니다.
이것이 내가 시도한 것입니다.
Typeface font = Typeface.createFromAsset(getAssets(), "myfont.ttf");
private WebView webview;
WebSettings webSettings = webView.getSettings();
webSettings.setFixedFontFamily(font);
누구나 이것을 수정하거나 webview의 기본 글꼴을 사용자 정의 글꼴로 변경하는 다른 방법을 제안 할 수 있습니까?
감사!
답변
이 프로젝트 에는 이에 대한 실제적인 예가 있습니다. 요약하면 다음과 같습니다.
- 당신에
assets/fonts
폴더 (여기 MyFont.otf) 원하는 OTF 또는 TTF 폰트를 배치 -
assets
폴더 안에 WebView의 콘텐츠에 사용할 HTML 파일을 만듭니다 (여기 내부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>
-
코드에서 WebView로 HTML을로드합니다.
webview.loadUrl("file:///android_asset/demo/my_page.html");
HTML을 통해 삽입하는 loadData()
것은 허용되지 않습니다. 문서에 따라 :
JavaScript의 동일한 출처 정책은이 방법을 사용하여로드 된 페이지에서 실행되는 스크립트가 ‘http (s)’를 포함하여 ‘data’이외의 스키마를 사용하여로드 된 콘텐츠에 액세스 할 수 없음을 의미합니다. 이 제한을 피하려면 적절한 기본 URL과 함께 loadDataWithBaseURL ()을 사용하십시오.
@JaakL이 아래 주석에서 제안했듯이 문자열에서 HTML을로드하려면 대신 자산을 가리키는 기본 URL을 제공해야합니다.
webView.loadDataWithBaseURL("file:///android_asset/", htmlData);
에서 글꼴을 참조 할 때 htmlData
간단히 사용할 수 있습니다 /fonts/MyFont.otf
(기본 URL 생략).
답변
이 코드를 사용하고 있습니다 .
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);
답변
더 간단하게 자산 URL 형식을 사용하여 글꼴을 참조 할 수 있습니다. 프로그래밍이 필요하지 않습니다!
@font-face {
font-family: 'myface';
src: url('file:///android_asset/fonts/myfont.ttf');
}
body {
font-family: 'myface', serif;
…
답변
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. 위의 함수는 한 번만 호출해야합니다 (이에 대한 논리를 찾아야합니다).
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에 상대적이며 올바르게 찾고 사용됩니다.
내 내부 저장소에 다음 파일을 저장했습니다.
- 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)를 대상으로하는 동안에 만 이것을 시도 했으므로 다른 버전에서 작동하는지 모르겠습니다.
답변
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);