ie8에서 패리윙클 스킨 문제로 고민하다가 검색 중에 알게된 웹폰트 적용 팁을 알려드립니다.
반응형 스킨이 처음이나 마찮가지여서 ie8 적용문제로 삽질하다가 ie8에 웹폰트 적용하는 것에 대해 알게되어서 적습니다.
블로그 접속자 브라우저 항목에 ie7 이나 ie6 이 있는 분들 계실겁니다.
근데 이게 실제로 ie7 이나 ie6이 아니라 ie8이 html5 를 만나면 호환성모드라는걸 작동시키는데
이 호환성모드가 ie7 엔진이나 ie6 엔진같은 하위엔진을 쓰는 모드라고 합니다.
그래서 html5 화면은 더더욱 이상하게 나오게 됩니다.
우선 skin.html 에서
<meta charset="UTF-8... 아랫줄에
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
이걸 추가합니다. 이걸 추가하면 하위 엔진 사용을 안하게 된데요.
그리고 웹폰트를 적용하는데 ie8은 eot 웹폰트만 지원하기 때문에 ie8을 쓰려면 eot 파일을 구해야 합니다.
인터넷에 찾아보시면 나눔폰트가 eot 파일과 woff 파일 모두 돌아댕기고 있고
라이센스 문제도 없어서 맘대로 쓸 수가 있습니다. 네이버가 유일하게 잘한 점.
eot 파일을 패리윙클 스킨 폴더 fonts 폴더에 넣어줍니다.
저는 나눔바른고딕 을 썼기 때문에 NanumBarunGothic.eot 파일을 넣어주었습니다.
그리고 css 파일에 아래 내용을 추가합니다.
@font-face{
font-family:ng;
src:url(../fonts/NanumBarunGothic.eot);
src:local(※), url(//cdn.jsdelivr.net/font-nanum/1.0/NanumbarunGothic/NanumbarunGothic.woff) format(‘woff’)
}
검색해보니 모든 브라우저에 가장 효율적으로 웹폰트를 적용할 수 있는 간단한 코드가 이거 같더군요.
ie8에서만 eot를 불러오고 local 부분에서 ie8처리가 안되서 멈추고
다른 브라우저는 woff 파일만 불러오게 된다고 합니다.
그리고 css 폰트 적용한 부분에 예를들어
.container {
color: #666;
font: 1.0em/1.7 "Helvetica Neue", Helvetica,나눔바른고딕,NanumBarunGothic,ng;
}
이렇게 적용해줍니다. 한글로 폰트 이름을 써야 ie8 에서 적용되길래 둘다 한번씩 넣어주고 끝에 ng를 붙여줍니다.
추가로... 제가 패리윙클이 ie8 에서 제대로 안나오는 문제는 skin.html 에서
<link href="./css/bootstrap.css" rel="stylesheet">
<!-- <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> -->
이렇게 외부 bootstrap.css 를 주석처리하고 스킨폴더 bootstrap.css 파일을 활성화 해주면 해결 됩니다.
완료하고 나면 ie8 에서도 암튼 반응형 적용되고 웹폰트도 정상 적용됩니다.
xpsp3+ie8 과 win7sp1+ie11, 크롬, troy 통해서 각 모바일기기까지 테스트 완료했습니다.
*** 웹폰트 관한 부분은 naradesign.net의 정찬명님의 글 (http://naradesign.net/wp/2012/06/19/1830/)를 참고했습니다.
니들웍스 
