웹폰트를 설정할 때 크로스브라우징을 위하여 font 타입이 여러가지가 존재 한다.
- eof : 익스플로러 4~8,
- woff : 표준 Web Open Font Format,
- otf : opentype,
- ttf : truetype,
- svg : Scalable Vactor Graphoics
폰트가 ttf파일을 제공하므로 ttf파일을 eot와 woff파일로 변환하여야 한다.
1. ttf > eot 변환하는 방법
2. ttf > woff로 변환하는 방법
sfnt2woff.exe을 다운받아 sfnt2woff.exe에 드래그앤드롭하면 woff로 변환!
3. 폰트설정
@font-face{
font-family: 'NG';
font-style: normal;
font-weight: normal;
src: url('font/NanumGothic.eot');
src: url('font/NanumGothic.eot?#iefix') format('eot');
src: local('☺'),
url('font/NanumGothic.woff') format('woff'),
url('font/NanumGothic.ttf') format('ttf'),
url('font/NanumGothic.svg#webfontFHzvtkso') format('svg');
}
|
4. IE호환성 모드에서 eot폰트를 로딩할 때 실패하는 경우가 있다. 이때 위에 표현한대로
src: url('font/NanumGothic.eot');
src: url('font/NanumGothic.eot?#iefix') format('eot');
이와 같이 설정하여 주거나, meta 태그를 추가하여 익스플로러가 호환성 모드에서 빠져나오게 강제로 지정한다.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
