WebView 폰트 사용
2012.01.25 20:29 in Android/hybrid
Chrome, Safari 에서 웹 폰트를 사용하기 위해서는 css 파일에 다음과 같이 font-face를 지정하고 사용하면 가능하다.
폰트 종류는 데스크탑 브라우저에서는 woff, ttf 가 가능하고, iOS 모바일 브라우저에서도 woff가 가능하지만, 안드로이드에서는 ttf만 적용 가능하다.
그리고 반드시 font-face에서 format('ttf') 속성을 제거해야만 사용이 가능하다.
안드로이드 웹뷰에서 폰트 미적용으로 고생하고 있다면 이것으로 처리하자.
url 은 app 내에 assets 파일에 포함할 수도 있고, 웹 서버가 있다면 url 경로로 지정할 수 있다.
폰내에서 로컬서버를 띄우던, file:// 로 서비스를 하던, 원격 서버의 url을 가지던 동일하게 동작한다.
이걸로 내가 잃어버린 시간을 누군가 세이브 하시길...
폰트 종류는 데스크탑 브라우저에서는 woff, ttf 가 가능하고, iOS 모바일 브라우저에서도 woff가 가능하지만, 안드로이드에서는 ttf만 적용 가능하다.
그리고 반드시 font-face에서 format('ttf') 속성을 제거해야만 사용이 가능하다.
@font-face{ font-family: '나눔손글씨 펜'; font-weight: normal; font-style: normal; src:url('NanumPen.ttf');}
안드로이드 웹뷰에서 폰트 미적용으로 고생하고 있다면 이것으로 처리하자.
url 은 app 내에 assets 파일에 포함할 수도 있고, 웹 서버가 있다면 url 경로로 지정할 수 있다.
예) @font-face{ font-family: '나눔손글씨 펜'; font-weight: normal; font-style: normal; src:url('file:///android_asset/NanumPen.ttf');}
폰내에서 로컬서버를 띄우던, file:// 로 서비스를 하던, 원격 서버의 url을 가지던 동일하게 동작한다.
이걸로 내가 잃어버린 시간을 누군가 세이브 하시길...
- [2016/01/26] 모바일 기종에 따라 기본 폰트 사이즈 지정해주는 스크립트 ()
댓글 0
댓글 쓰기 권한이 없습니다.
43 | 모바일 크로스 브라우징 | 2017.03.14 |
42 | Android sdk 번호(Api level)와 버전 정리 | 2017.02.08 |
41 | 모바일 디자인 가이드 | 2016.07.12 |
40 | 팝업 내용에 맞게 사이즈 조절 | 2016.07.11 |
39 | 아이폰 Web App 만들기 | 2016.07.04 |
38 | 반응형 웹과 모바일 퍼스트 | 2016.02.02 |
> | WebView 폰트 사용 | 2016.01.26 |
36 | 모바일 기종에 따라 기본 폰트 사이즈 지정해주는 스크립트 | 2016.01.26 |
35 | 디바이스 해상도 1 | 2015.11.06 |
34 | device-pixel-ratio 계산법(-webkit-min-device-pixel-ratio)와 ppi | 2015.11.06 |
33 | 모바일웹을 위한 9가지 최적화 기법 | 2015.10.16 |
32 | 모바일코딩을 도와주는 사이트 모음 | 2015.10.12 |
31 | 반응형웹 모바일 기기별 코딩하기(미디어쿼리) | 2015.10.12 |
30 | 백그라운드이미지 | 2015.10.12 |
29 | 스마트폰으로 접속시 해당 모바일 웹페이지로 자동 링크됩니다 1 | 2015.10.12 |
28 | 웹페이지가 브라우징된 후 주소창을 사라지게 합니다. | 2015.10.12 |
27 | 모바일 코딩 팁 | 2015.10.12 |
26 | 모바일 웹페이지 코딩 전 기본 꿀팁(css) | 2015.09.15 |
25 | 모바일 코딩에 사용하는 기본 html | 2015.09.15 |
24 | 전화링크 | 2015.05.02 |