seevaa.net

  • 본문 바로가기
  • 블로그 내 검색
  • 글 분류 목록
  • 최근 글 목록
  • 기타 블로그메뉴
  • about
  • photolog
  • socialpage
  • taglog
  • guestbook
  • admin

웹폰트 적용방법

from Fonts 2007/12/27 18:33 by seevaa Share on Twitter*

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에서 찾아 안깨지도록 설정해주면 되니까요~

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

'Fonts' 카테고리의 다른 글

웹폰트(seevaa2007.eot) 신청은 여기에...  (669) 2008/01/17
웹폰트 적용방법  (71) 2007/12/27
네이트온 글꼴매니저와 seevaa2007체 업데이트  (314) 2007/11/05
웹폰트, 원하시면 드립니다.  (605) 2007/03/27
Tag // seevaa2007, style.css, 웹폰트 적용
트랙백 2개, 댓글 71개가 달렸습니다.

Trackback Address http://seevaa.net/trackback/145

<< 1 ... 221 222 223 224 225 226 227 228 229 ... 319 >>

Categories

  • All (319)
    • Life Style (103)
    • Images (94)
      • Photo (94)
    • Web Standard (10)
      • HTML (0)
      • CSS (3)
      • JavaScript (7)
    • Application Programing (8)
      • java/jsp (8)
    • DataBase (5)
      • Oracle (3)
      • MySQL (0)
    • Programing Tool (2)
      • Eclipse (2)
    • Tistory (53)
      • Skin (25)
    • Fonts (12)
    • Bookmarks (31)

Recent Posts

  • 페이지 속 특정부분만.. (3)
  • 링크 요소(a element)의..
  • Image Thumbnail 만들기
  • 정규식 표현으로 필드값..
  • 파라미터 관련 유틸
  • JSTL <functions>
  • Spring - ServletReques..
  • Oracle & sqlplus 설정
  • 샤방샤방 세차장 (5)
  • XMLHttpRequest Object

Recent Comments

  • 스킨 사용할께요 감사합니...
  • GJosephs 02/14
  • [비밀댓글].
  • 02/12
  • 안녕하세요 seevaa님, 덕...
  • 레오♥ 02/10
  • 좋은 스킨 감사합니다^^...
  • April2_MJ 02/08
  • 좋은 스킨을 찾았네요! 잘...
  • April2_MJ 02/08

Recent Trackbacks

  • ㅇ.
  • bbonggle.Go 01/26
  • [블로그] 웹폰트로 개성있...
  • 512 2011
  • [iPhone4] 목련.
  • FotoZone 2011
  • 티스토리를 시작하며...
  • Leave Traces 2011
  • 간단하게 트위터 페이지...
  • YIYUNI.com* 2011

Archive

  • 2011/12 (2)
  • 2011/10 (5)
  • 2011/09 (1)
  • 2011/06 (1)
  • 2011/05 (1)
  • 2011/04 (11)
  • 2011/03 (10)
  • 2011/02 (1)
  • 2010/11 (4)
  • 2010/09 (1)

Links

  • http://wing91.tistory.com
  • http://xylosper.net
  • http://hanrss.co.kr
  • http://poty.cafe24.com
  • http://standardmag.org
  • http://www.raysoda.com/ess
  • http://startuu.net
  • http://cyoonk.com
  • http://trio.co.kr/webrefer/c..
  • http://designsen.net
  • http://tipography.tistory.com
  • http://twitter.com/seevaa_
  • http://tum.seevaa.net
  • http://clip.seevaa.net
subscribe to RSS

T37 Y167 T367,241
subscribe to RSS, valid XHTML, CSS
Powered by Tistory, Designed by seevaa

  • 처음으로
  • 본문 바로가기
  • 블로그 내 검색
  • 글 분류 목록
  • 최근 글 목록
  • 기타 블로그메뉴
seevaa.net - 웹폰트 적용방법
작성자 : 쎄바(seevaa)
연락처 : seevaa@seevaa.net