차근차근/Android

앱 폰트 웹에서 사용, 하이브리드 앱 , 웹뷰

예쁜꽃이피었으면 2015. 1. 29. 11:34

검색어 : 

안드로이드, Webview 에 Custom font 적용하기

asset 폰트 웹에서 사용

font-face 여러개

android_asset

앱폰트 웹에서 사용

하이브리드 앱 폰트







안드로이드, Webview 에 Custom font 적용하기


http://aroundck.tistory.com/2107


구글링 해 본 결과, 안드로이드 2.1 버전에서는 버그로 이 방법이 적용 안 된다고 한다.


먼저 font file( TTF ) 은 asset 폴더에 넣는다.



<sample code>

private void initView(){

WebView webView = new WebView( this );

setContentView( webView );

String meta = "<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>";

String style =  "<style>@font-face {font-family: 'gamza';src: url('file:///android_asset/h.ttf');}body {font-family: 'gamza';}</style>"

String body = "<body><strong>감자! Strong </strong><br /><b>감자! Bold</b><br />감자! 그냥</body>";


String head = "<head>" + meta + style + "</head>";

String htmlContents = "<html>" + head + body + "</html>";

        

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

}


핵심정리!


custom font 를 asset 에 두고, html page 에 이 font 를 style 로 연결시켜준다.


@font-face{

font-family: 'fontName';

src: url('file:///android_asset/fontName.ttf');

}

body{

font-family: 'fontName';

}


여기서 주의사항은 WebView 에 데이터를 연동시킬 때, font 를 불러올 context 를 맞춰줘야 한다.

즉, WebView.loadDataWithBaseURL () 의 첫번째 파라미터에 BaseURL 로 file:///android_asset/ 을 연결해줌으로서

context 를 맞춰주어야만 정상적으로 html 로딩이 가능하다.


그게 싫다면, html 파일 자체를 asset 에 동일하게 두는 방식으로 context 를 맞춰주어야 한다.



WebView 폰트 사용


http://xefee.tistory.com/entry/WebView-%ED%8F%B0%ED%8A%B8-%EC%82%AC%EC%9A%A9




반응형