Android에서 Webview의 글꼴을 변경하는 방법은 무엇입니까?

programing

Android에서 Webview의 글꼴을 변경하는 방법은 무엇입니까?

nasanasas 2020. 8. 29. 11:11

Android에서 Webview의 글꼴을 변경하는 방법은 무엇입니까?

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;

...

It can be done in Android. I took three days to solve this issue. But now it seems very easy. Follow these steps to set custom font for Webview

1.Add your font to assets folder
2.Copy the font to application's files directory

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.You have to call above function only once (you have to find some logic for this).

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

4.Use the below code to set value for your webview. Here I am using CSS to set font.

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.You can call the above function as below

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

i done this by upper answers with this additions:

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

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

thanks to everybody:)

Many of the above answers work lie a charm if you have your content in your assets folder.

However, if you like me want to download and save all your assets from a server to your internal storage you can instead use loadDataWithBaseURL and use a reference to your internal storage as the baseUrl. Then all files there will be relative to the loaded html and are found and used correctly.

In my internal storage I have saved the following files:

IndigoAntiqua2Text-Regular.ttf
style.css
image.png

Then I use the following code:

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

The CSS file used in the above html (style.css):

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

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

I have only tried this while targeting minSdkVersion 19 (4.4) so I have no idea if it works on other versions

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

You can do it by using CSS. I did it with an app but it won't work in Android 2.1 as there is an known bug with Android browser 2.1.

The issue is it needs to be in a folder, try putting "./myfont.ttf" instead, if not put the font inside a folder in assets like "fonts/myfont.ttf" that will work for sure.

You need not use local ttf file to set webview font for android, It will increase the whole app size.

you can also use online fonts like google's font... It will help to reduce your apk size.

For example: visit the below URL https://gist.github.com/karimnaaji/b6c9c9e819204113e9cabf290d580551#file-googlefonts-txt

You will found necessary info to use this font. then create a String like below

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

then load the webview like this

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

done. You will able to load the font from the external source in this way.

Now whats about the app font, it doesn't make sense to use 1 font for the webview and different font for the whole app. So you can use Downloadable Fonts in your app which also uses external sources for loading fonts in the app.

This is how do you load htmlData in a webview:

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

where getHtmlData(activity,**htmlData**) returns a string of html code.

참고URL : https://stackoverflow.com/questions/3900658/how-to-change-font-face-of-webview-in-android

'programing' 카테고리의 다른 글

.cc와 .cpp 파일 접미사의 차이점은 무엇입니까? (0)	2020.08.30
Linq to SQL "(값 목록)에서 [열] 위치"수행 방법 (0)	2020.08.30
Android에서 Looper, Handler 및 MessageQueue의 관계는 무엇입니까? (0)	2020.08.29
Javascript / jQuery의 배열에서 여러 요소 제거 (0)	2020.08.29
HTML 요소에서 끌어서 놓기를 비활성화 하시겠습니까? (0)	2020.08.29

현재글Android에서 Webview의 글꼴을 변경하는 방법은 무엇입니까?

nasanasa

Android에서 Webview의 글꼴을 변경하는 방법은 무엇입니까?

Android에서 Webview의 글꼴을 변경하는 방법은 무엇입니까?

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

Android에서 Webview의 글꼴을 변경하는 방법은 무엇입니까?

Android에서 Webview의 글꼴을 변경하는 방법은 무엇입니까?

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바