code

WebView에서 사용자 지정 글꼴을 사용하는 방법

codestyles 2020. 12. 11. 08:15
반응형

WebView에서 사용자 지정 글꼴을 사용하는 방법


이제 일부 유니 코드 문자를 표시하고 태그를 사용했습니다 : <font face=" Arial">something here</font>. 하지만 WebViewUFO 문자 만 볼 수있어 Arial 폰트를 찾을 수없는 것 같습니다 . arial.ttf를 다른 곳에 복사해야 WebView합니까? 아니면 이 트루 타입 글꼴을 어떻게 사용할 수 있습니까? 감사.


loadData나에게도 작동하지 않았으므로 file:///android_assetsrc 경로에서 사용 했습니다.

그것은 함께 일했습니다 loadDataWithBaseURL!

이 예에서는 CSS를 다음과 같이 변경했습니다.

@font-face {
    font-family: 'feast';
    src: url('fonts/feasfbrg.ttf');
}

body {font-family: 'feast';}

그런 다음 자산 경로를 기본 URL로 사용하십시오.

loadDataWithBaseURL("file:///android_asset/",myhtml,"text/html","utf-8",null);

WebView위의 @raychung이 제안한 것처럼 사용자 정의 글꼴을 사용할 수 있습니다 . 그러나 이것은 2.1에서는 작동하지 않습니다 (버그는 여기 에보고 됨 ). 이것은 1.5, 1.6 및 2.2에서 작동합니다.

사용자 정의 글꼴 TTF 파일을 /assets폴더에 넣은 다음 CSS 파일에 넣을 수 있습니다.

@font-face { 
    font-family: "myIPA"; 
    src: url('IPA.TTF'); 
}
.phon, .unicode
{
    display: inline;    
    font-family: 'myIPA', Verdana, sans-serif;  
    font-size: 14pt;
    font-weight: 500;
    font-style:normal;
    color: black;
}

이제 HTML 파일에서이 글꼴 스타일을 참조 할 수 있습니다.


앱을 처음 시작할 때 자산의 글꼴 파일을 파일 폴더로 복사하여 모든 버전에서 작동하도록 할 수 있으며 다음과 같이 참조 할 수 있습니다.

"@font-face {
 font-family: cool_font;
 src: url('file://"+ getFilesDir().getAbsolutePath() 
  + "/cool_font.ttf');
}"

@font-face {
 font-family: 'MyCustomFont';
 src: url('/assets/fonts/MaycustomFont.ttf') 
}

그것은 나를 위해 작동합니다.

->src
->assets
   ->fonts
      ->MaycustomFont.ttf
->..
->res

나는 페르시아어 글꼴로 rtl 방향에 대한 코드를 사용했습니다. 누군가이 코드를 사용했거나 누군가가 나에게 가장 좋은 방법을 제안하기를 바랍니다. 감사

            String myCustomStyleString="<style type=\"text/css\">@font-face {font-family: MyFont;src: url(\"file:///android_asset/fonts/BYEKAN.ttf\")}body,* {font-family: MyFont; font-size: medium;text-align: justify;}</style>";
                    webView.loadDataWithBaseURL("", myCustomStyleString+"<div style=\"direction:rtl\">"+myHtm+"</div>", "text/html", "utf-8", null);

그것은 나를 위해 작동하지 않았으며 로컬 파일에 대한 참조를 사용하는 대신 웹 서버에서 글꼴을 연결해야했습니다.

   @font-face {
   font-family: 'feast';
   src: url('http://yoursite.com/tutorial/css/feasfbrg.ttf');
}

body {font-family: 'feast';}

이것은 내가 테스트 한 모든 장치에서 잘 작동합니다.

글꼴 파일을 / src / main / assets / fonts에 배치 한 후 다음 방법을 사용하십시오.

public class HTMLUtils {

    public static String getLocalFontInHTML(String html, String fontFamily, String fontFileName) {

      return "<!DOCTYPE html>\n" +
            "<html>\n" +
            "<head>\n" +
            "<style>" +
            "@font-face {" +
            "font-family: " + fontFamily + ";" +
            "src: url('" + fontFileName + "');" +
            "}" +
            "* {font-family: '" + fontFamily + "' !important;}" +
            "* {font-size: 1rem !important;}" +
            "</style>" +
            "</head>\n" +
            "<body>\n" +
            html +
            "\n" +
            "</body>\n" +
            "</html>";
     }
}

다음과 같이

webView.loadDataWithBaseURL("file:///android_asset/", HTMLUtils.getLocalFontInHTML(item.text, Config.FONT_FAMILY, Config.REGULAR_FONT),"text/html", "UTF-8", null);

어디

public static final String FONT_FAMILY = "Montserrat";

public static final String REGULAR_FONT = "fonts/Montserrat-Regular.otf";

누군가에게 도움이되기를 바랍니다!

HTML 코드에서 글꼴 크기를 유지하려면 제거하십시오.

 "* {font-size: 1rem !important;}"

1rem은 약 14sp와 같습니다.


Felipe Martinez Carreño가 말했듯이 자산에서 복사 할 수 있으며 작동합니다.

You can refer this for more details


The basic idea is that the web page should have access to the font file. This is why the suggested original solution works when both the HTML file and the font file are in the assets folder, and the HTML file is loaded from there.

It isn't an Android feature, it's CSS, so should work with any Android SDK.

Loading the font from the files folder should work as well, if the font file is really there and the correct path to it is given in the style. But tho approach is messier, one needs to write code to copy the file, then code to figure out the location of the file.

I am quite happy to simply have the HTML content and the font file in the assets, and loading from there.

webView.loadUrl("file:///android_asset/content.html");

use css

    @font-face {
     font-family: cool_font;
     src: url('cool_font.ttf');
    }

참고URL : https://stackoverflow.com/questions/1344080/how-to-use-custom-font-with-webview

반응형