[긴급]PHP 원격 코드 실행 취약점 안내
이전
목록
다음
전

모바일/테블릿의 @font-face 지원여부

전진
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2012-12-07 (금) 15:56:34 · 4441 · 2
(반응형 웹 관련 소식을 전하는 http://responsive.rga.com/ 에 올라온 뉴스입니다.)

@font-face를 모바일/테블릿 기기/브라우져 들이 지원하는지 테스트 한 글입니다.
(출처: http://blog.kaelig.fr/post/33373448491/testing-font-face-support-on-mobile-and-tablet )

@font-face 를 이용한 glyph (즉, 아이콘) 등을 보이는 경우가 많은데, 모바일 기기/브라우져에서 어떻게 나오는지 궁금할 수 있습니다. 대표적인 테스트방법으로 Modernizr 를 이용하여 다음과 같이 테스트 할수도 있습니다.

if (Modernizr.fontface) {
    document.write('Browser says @font-face IS supported');
} else {
    document.write('Browser says @font-face NOT supported');
}
그런데, 한두가지 기기에서는 Modernizr가 된다고 했는데 실제로 되지 않는 경우(false positive)도 있고, 그리고 이것 하나 테스트 하고자 Modernizr를 모바일에 올리기에는 너무 크기에, 이번 실험에서 검증된 '지원하지 않는' 기기들을 UA 문자열 을 기반으로 테스트 하는 정도면 충분할거라고 하네요.

if (!!navigator.userAgent.match(/(Android (2.0|2.1))|(Nokia)|(Opera (Mini|Mobi))|(w(eb)?OSBrowser)|(UCWEB)|(Windows Phone)|(XBLWP)|(ZuneWP)/)) {
    return false;
}
위에서 보듯이, 구버전 안드로이드, 노키아, 오페라, 웹OS, 윈도우 폰, 그리고 마이너 몇개의 경우 지원하지 않는다고 합니다.  재밌는 것은, 마이크로소프트 웹사이트는, 자기네 윈도우 폰으로 접속하는 경우, font face 클래스를 삭제해버린다네요.. ^^;;

/(Windows Phone)|(XBLWP)|(ZuneWP)/.test(navigator.userAgent)&&$("html").removeClass("fontface")
비록, 대부분의 현대적 모바일기기/브라우져들이 대부분 @font-face를 지원한다지만, 오페라나 윈도우 폰의 경우는 좀 의외입니다. :)
#퍼블리셔팁 #퍼블리셔 #팁자료실 #css
|

댓글 2개

도치즈
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2012-12-22 (토) 10:58:39
으음.. 요즘은 다 맞게 나오는것 같지만 알아두면 좋을것같군요 ㅎ
port
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2013-06-29 (토) 16:08:25
참고 하겠습니다.
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
13-03-03 조회 6,216
13-03-01 조회 5,550
13-03-01 조회 8,284
13-03-01 조회 6,261
13-02-26 조회 3,875
13-02-26 조회 3,825
13-02-26 조회 4,716
13-02-24 조회 8,154
13-02-24 조회 4,233
13-02-24 조회 3,485
13-02-24 조회 5,287
13-02-24 조회 5,286
13-02-24 조회 4,355
13-02-24 조회 5,696
13-02-24 조회 9,380
13-02-14 조회 5,075
13-02-13 조회 8,998
13-01-29 조회 7,646
13-01-24 조회 5,005
13-01-24 조회 4,880
13-01-17 조회 4,282
13-01-16 조회 4,300
13-01-08 조회 4,377
12-12-27 조회 4,031
12-12-20 조회 1.1만
12-12-20 조회 3,358
12-12-06 조회 4,344
12-12-01 조회 4,091
12-11-28 조회 5,659
12-11-25 조회 5,371
12-10-20 조회 4,638
12-10-03 조회 4,790
12-09-26 조회 4,979
12-09-15 조회 8,422
12-09-14 조회 5,441
12-09-11 조회 3,930
12-09-10 조회 3,962
12-09-05 조회 8,834
12-08-29 조회 4,613
12-08-26 조회 3,753
12-08-23 조회 3,462
12-08-22 조회 3,535
12-08-22 조회 4,348
12-08-21 조회 3,499
12-08-20 조회 3,424
12-08-20 조회 9,234
12-08-15 조회 4,346
12-08-13 조회 3,268
12-08-11 조회 4,681
12-08-05 조회 4,527
12-08-03 조회 3,307
12-08-03 조회 4,004
12-08-02 조회 4,991
12-07-29 조회 4,097
12-07-26 조회 3,681
12-07-26 조회 3,555
12-07-22 조회 3,458
12-07-20 조회 3,295
12-07-19 조회 4,162
12-07-19 조회 3,419
12-07-16 조회 3,539
12-07-16 조회 4,457
12-07-15 조회 3,515
12-07-12 조회 7,357
12-07-12 조회 5,004
12-07-11 조회 3,037
12-07-09 조회 3,216
12-07-05 조회 3,818
12-07-04 조회 4,397
12-07-04 조회 3,803
12-07-04 조회 4,335
12-06-29 조회 3,781
12-06-27 조회 3,363
12-06-24 조회 3,839
12-06-22 조회 4,150
12-06-22 조회 8,568
12-06-22 조회 3,225
12-06-21 조회 3,248
12-06-17 조회 3,867
12-06-14 조회 3,969
12-06-14 조회 3,254
12-06-08 조회 4,412
12-06-06 조회 3,365
12-06-04 조회 4,116
12-05-26 조회 4,959
12-05-26 조회 3,902
12-05-25 조회 3,193
12-05-24 조회 3,292
12-05-22 조회 3,334
12-05-20 조회 2,969
12-05-16 조회 3,113
12-05-15 조회 3,509
12-05-10 조회 3,940
12-05-08 조회 3,454
12-05-04 조회 3,305
12-05-03 조회 4,250
12-05-02 조회 3,401
12-05-02 조회 3,160
12-05-02 조회 3,270
12-04-26 조회 3,417
글쓰기