seevaa의 잡다구리한 이야기

스타일문서 없이 보이는 화면입니다. 아래 메뉴를 활용하시면 보다 용이하게 이동하실 수 있습니다. (표현상 about, gallery 내용이 상단에 출력되는 불편이 있습니다.)

본문 | 글 분류 | 최근 글 | 블로그 소개 | 겔러리 썸네일보기 | 태그 | 방명록 | 아래로




웹폰트 적용방법

from font 2007/12/27 18:33

1. 초간단 붙여넣기로 적용하기

아래소스를 html 헤드에 붙여넣는 방법입니다. 폰트네임, 주소, 크기만 설정해주시면 되는거죠~ 단, 이렇게 초간단 방법으로하면 모든(아래해당되는) 글자에 적용되어 기존(따로설정된 css)의 설정을 해칠 수 있는 문제가 있습니다.

<style type="text/css">
<!--
	@font-face {font-family:seevaa2007; src:url(http://~/seevaa2007.eot);}
	body,div,table,tr,td,p,span{font-family:seevaa2007; font-size:12px;}
	a:link {font-family:seevaa2007; font-size:12px;}
	a:visited {font-family:seevaa2007; font-size:12px;}
	a:hover {font-family:seevaa2007; font-size:12px;}
	a:acvite {font-family:seevaa2007; font-size:12px;}
-->
</style>

2. style.css 를 이용해 최적으로 적용하기(기존의 style.css가 있는경우, TT나 Tistory)

1번과 같은 방법은 간편하긴 하지만 기존의 폰트설정을 해치게 되고, 또한 세밀하고 최적화된 적용엔 한계가 있죠... 2번째 방법은(위의 방법과 별반 다를 건 없지만) 기존의 style.css을 이용한 좀더 구체적인 방법입니다.
먼저, style.css 를 열어서 아래소스를 붙여넣습니다.

@font-face { font-family:seevaa2007; src:url(images/seevaa2007.eot);}

그리고, 아래와 같이 원하는 부분의 폰트 설정을 바꿔줍니다. style.css를 열고 해당부분을 찾아 적용을 해야하니 첨이라면 조금 복잡할 수 있습니다.
예를 들어 본문(.article)만 적용하고싶다면??

.article { font:12px Gulim, Dotum;} >> .article { font:12px seevaa2007, Dotum, verdana;}

이렇게 하시면 다른 부분의 설정을 그대로 두고 원하는 부분만 적용이 되기때문에 원하지 않는 글자깨짐같은 건 없을 겁니다. 만약 생긴다 하더라도 그부분을 style.css에서 찾아 안깨지도록 설정해주면 되니까요~

주의할 점은 크기에 신경쓰셔야하는 겁니다. 코멘트수와 같이 작게 지정된 경우는 웹폰트보다는 그설정 그대로 두시는게 보기좋습니다. 그래도 적용하시려면 깨지지 않도록 크기지정에 신경쓰셔야 합니다.



|  1  | ...  88  |  89  |  90  |  91  |  92  |  93  |  94  |  95  |  96  | ...  209  |