웹폰트를 사용한 텍스트 폰트변경하는 방법

<style>

@font-face{font-family:fontstyle01;src:url(NanumGothic.eot);}

@font-face{font-family:fontstyle02;src:url(NanumGothicBold.eot);}

@font-face{font-family:fontstyle03;src:url(NanumGothicExtraBold.eot);}

</style>

<div style="font-family:fontstyle01">웹폰트 NanumGothic.eot</div>

<div style="font-family:fontstyle02">웹폰트 NanumGothicBold.eot</div>

<div style="font-family:fontstyle03">웹폰트 NanumGothicExtraBold.eot</div> 

 

웹폰트를 사용하는 방법이다

스타일부분에 @font-face{font-family: fontstyle01;src:url(/swww/font/RixGoB.eot);} 선언하고

사용하고자 하는곳에 다음과같이 사용하면적용된다 <div style="font-family:fontstyle01">웹폰트 NanumGothic.eot</div>

 

장점이 틀림없이 있다 그러나 난 별로 사용하지 안는다

이유는 IE에서는 작동되는데 크롬브라우저에서는 적용되지 않는다

그리고 적용되는 IE에서도 로딩과동시에 적용되는것이 아닌 페이지로딩후 조금 후에 글씨체가 변경된다

아무래도 해당 NanumGothic.eot 폰트를 불러오는 시간이 걸리는듯하다

 

그리고 기본적인 확장자는 ttf인데 이걸 eot파일로 변경한 후에 사용해야된다 

<style>
@font-face{font-family:fontstyle01;src:url(NanumGothic.eot);}
@font-face{font-family:fontstyle02;src:url(NanumGothicBold.eot);}
@font-face{font-family:fontstyle03;src:url(NanumGothicExtraBold.eot);}
</style>
<div style="font-family:fontstyle01">웹폰트 NanumGothic.eot</div>
<div style="font-family:fontstyle02">웹폰트 NanumGothicBold.eot</div>
<div style="font-family:fontstyle03">웹폰트 NanumGothicExtraBold.eot</div>