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

97

webview의 기본 글꼴을 사용자 정의 글꼴로 변경하고 싶습니다. Android 용 이중 언어 브라우저 앱을 개발하는 데 webview를 사용하고 있습니다.

사용자 지정 글꼴을 자산에 배치하여 사용자 지정 서체의 인스턴스를 얻으려고했습니다. 하지만 여전히 webview의 기본 글꼴을 내 글꼴로 설정할 수 없습니다.

이것이 내가 시도한 것입니다.

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

누구나 이것을 수정하거나 webview의 기본 글꼴을 사용자 정의 글꼴로 변경하는 다른 방법을 제안 할 수 있습니까?

감사!

android  webview  font-face  custom-font 
— Dhanika
소스
마침내 나는 이것이 할 수 없다는 것을 깨달았습니다.
— Dhanika
— 사무엘
안녕하세요이 글꼴 얼굴에 대한 해결책을 찾았습니까? 힌디어 글꼴 stackoverflow.com/q/5868198/501859 . 솔루션이 있다면 도와주세요
— Kishore
@Dhanika 같은 문제에 직면 한이 문제를 해결하는 방법.
— NagarjunaReddy 2013 년
— user3921740

답변:

111

이 프로젝트 에는 이에 대한 실제적인 예가 있습니다. 요약하면 다음과 같습니다.

  1. 당신에 assets/fonts폴더 (여기 MyFont.otf) 원하는 OTF 또는 TTF 폰트를 배치

  2. 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>

  3. 코드에서 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 생략).

— 폴 라머 츠마
소스
10
LoadData ()는 작동하지 않지만 webView.loadDataWithBaseURL ( "file : /// android_asset /", ... 작동합니다. 그러면 "/fonts/MyFont.otf"와 같은 글꼴 파일 참조도 작동합니다.
— JaakL
제 경우에는 데이터가 ck editor (backend api) <div style = \ "text-align : center; \"> <span style = \ "background-color : transparent; \"> <에서 태그 형식으로 반환됩니다. font color = \ "# f20505 \"size = \ "5 \"face = \ "Comic Sans MS \"> 귀하의 의견을 저희와 공유해주십시오 <\ / font> <\ / span> webview.loadData로 설정하고 있습니다 () 그러나 글꼴을 사용하지 않는 모든 솔루션 ??
— B.shruti
Comic Sans MS는 Android에서 제공하는 글꼴이 아닙니다. CSS에서 글꼴을 정의하고 응용 프로그램의 자산에 글꼴 파일을 제공 한 경우에만 작동합니다.
— Paul Lammertsma
2
내 글꼴은 res/font폴더에 있습니다. 그러면 경로는 무엇일까요? 시도 file:///android_res/font/했지만 작동하지 않는 것 같습니다.
— Wirling
105

이 코드를 사용하고 있습니다 .

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);
— 오 미드 오 미디
소스
2
OMG! 이것이 바로 우리를 잘못된 일의 흔적으로 안내 한 것입니다. 결과적으로 Android 4.2는 "src : url ( '...) 뒤에"format ('ttf ') "을 추가하면 글꼴을 렌더링하지 않습니다. ') "절. 그대로두면 글꼴이 아름답게 렌더링됩니다. Google의 자체 웹 글꼴로 테스트되었습니다.
— 파스칼 Lindelauf
2
이것은 엄지 손가락 솔루션을 흔들있다
— 사드 빌랄
loadDataWithBaseURL는 :( 안드로이드 4.1과 4.2 버전에서 작동하지 않습니다
— 미샤 Akopov
안드로이드 5.1에서 나를 위해 작동하지 않았습니다. 나는 (Dan Syrstad)의 대답을 사용했습니다. 차이는 인용입니다font-family: 'myface';
— Mneckoee
52

더 간단하게 자산 URL 형식을 사용하여 글꼴을 참조 할 수 있습니다. 프로그래밍이 필요하지 않습니다!

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

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

...

— 댄 시르 스타드
소스
1
나는 배치하는 경우 .ttf와 .html같은 디렉토리에 파일을 안드로이드 브라우저에서로드, 그것을 작동합니다. 그러나 내 앱의 WebView에서 CSS가 표시되는 동안 텍스트 .ttf는 프로젝트 assets/fonts폴더에 를 추가하더라도 Android의 기본 글꼴로 나타납니다 . 2.3.5에서 테스트하고 있지만 2.1에 대해 빌드합니다. 그게 문제일까요, 아니면 제가 놓친 게 있나요?
— Paul Lammertsma 2011 년
1
해결책을 찾았습니다. HTML 파일을 만들어 자산에 배치하면 view.loadUrl()작업 을 통해로드하는 반면 view.loadData()그렇지 않은 경우입니다. 후자가 왜 그렇지 않은지 모르겠습니다.
— Paul Lammertsma 2011 년
4
조금 늦었지만 view.loadDataWithBaseUrl (null, content, mime, enconding, null)과 함께 작동합니다
— Ours
28

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는 여전히 내 글꼴을로드하지 않습니다. 특별한 일이 있습니까? 감사!
— Zarah
html stackoverflow.com/q/5868198/501859에 대해 수행하는 방법 . 해결 방법이 있으면 도와주세요
— Kishore
그것은 나를 위해 작동합니다. Binary에게 감사합니다.
— Ravi Shanker Yadav
에셋 폴더에 글꼴이 있고 본문에 글꼴 및 글꼴 패밀리 이름의 전체 경로로 CSS를 변경하고 있습니다. 수정 후 콘텐츠를 다시로드하고 있지만 글꼴 변경 효과를 즉시 볼 수 없습니다
— Ravi
13

나는이 추가 사항으로 상위 답변으로 이것을 수행했습니다.

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


모두에게 감사드립니다 :)

— 블라드
소스
완벽한 답변 !!
— SANAT
6

위의 답변 중 대부분은 자산 폴더에 콘텐츠가 있으면 매력적입니다.

그러나 저를 좋아한다면 서버에서 내부 저장소로 모든 자산을 다운로드하고 저장하려면 대신 내부 저장소에 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)를 대상으로하는 동안에 만 이것을 시도 했으므로 다른 버전에서 작동하는지 모르겠습니다.

— Lejonl
소스
6 
 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);
— 지원 Pfrproject
소스
2
하고있는 일에 대한 설명을 추가하여 질문을 개선하십시오.
— lifeisfoo
2

Android 용 webview 글꼴을 설정하기 위해 로컬 ttf 파일을 사용할 필요가 없으며 전체 앱 크기가 증가합니다.

당신은 또한 구글의 글꼴과 같은 온라인 글꼴을 사용할 수 있습니다 ... 그것은 당신의 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를로드하십시오.

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

끝난. 이런 방식으로 외부 소스에서 글꼴을로드 할 수 있습니다.

이제 앱 글꼴은 어떻습니까? 웹뷰에 하나의 글꼴을 사용하고 전체 앱에 대해 다른 글꼴을 사용하는 것은 의미가 없습니다. 따라서 앱에서 글꼴을로드하기 위해 외부 소스를 사용하는 다운로드 가능한 글꼴 을 앱에서 사용할 수 있습니다 .

— 아프 잘 루르 라만라나
소스
1

CSS를 사용하여 할 수 있습니다. 앱으로했지만 Android 브라우저 2.1에는 알려진 버그가 있기 때문에 Android 2.1에서는 작동하지 않습니다.

— 2 회전
소스
1

문제는 폴더에 있어야한다는 것입니다. 확실하게 작동하는 "fonts / myfont.ttf"와 같은 자산의 폴더에 글꼴을 넣지 않으면 대신 "./myfont.ttf"를 넣으십시오.

— 나단 슈 베르만
소스
0

그것을 테스트하고 매력처럼 나를 위해 일하십시오.

   private void setResult() {

        String mimeType = "text/html;charset=UTF-8";
        String encoding = "utf-8";
        String htmlText = htmlPrivacy;

        String text = "<html><head>"
                + "<style type=\"text/css\">@font-face {font-family: MyFont;src: url(\"file:///android_asset/fonts/iy_reg.ttf\")}body{font-family: MyFont;color: #666666}"
                + "</style></head>"
                + "<body>"
                + htmlText
                + "</body></html>";

        webView.loadDataWithBaseURL(null, text, mimeType, encoding, null);
    }
— 사나 에바디
소스
0

res/font저처럼 글꼴을 넣는 경우 디렉토리를 다음과 같이 변경할 수 있습니다.

@font-face {
     font-family: yourfont;
     src: url("file:///android_res/font/yourfont.ttf")
}
        
body {
     font-family: yourfont;
}
— 이브라힘 알리
소스
0

https://github.com/delight-im/Android-AdvancedWebView 라이브러리를 사용 하십시오 .

HTML 데이터에서 :

<!doctype html>
<html>

<head>
<style type="text/css">
@font-face {
    font-family: MyFont;
    src: url("file:///android_asset/fonts/font1.ttf")
}
body {
    font-family: MyFont;
    font-size: medium;
    text-align: justify;
}
</style>
<meta http-equiv="Content-Type" content="text/html;  charset=utf-8">
<title>Title</title>
</head>

<body>

    ------ YOUR_CONTENT ------

</body>

</html>

XML에서 :

<im.delight.android.webview.AdvancedWebView
    android:id="@+id/advanced_web_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

자바에서 :

advancedWebView = findViewById(R.id.advanced_web_view);
advancedWebView.loadHtml(htmlData, "text/html; charset=utf-8", "utf-8");
— Arman 다운로드
소스
-3

다음은 webview에서 htmlData를로드하는 방법입니다.

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

여기서 getHtmlData(activity,**htmlData**)html 코드 문자열을 반환합니다.

— 알렉스 아웅
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.