블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 달린 댓글

'csszengarden'에 해당되는 글 1건

  1. 2008.07.23 웹폰트로 이쁜 웹페이지를 꾸며보자 (4)

웹표준코딩에 익숙한 사용자라면 csszengarden 사이트를 잘 알것이다.
csszengarden 사이트를 보면 동일한 마크업(HTML)에 CSS만으로 페이지 자체가 완전히 틀린 분위기를 연출하게 만들며 환상적인 폰트사용을 볼수 있다.

@font-face에 대해서 말해보려 한다.
아래 이미지는 강의자료로 사용했던 내용이다.
사용자 삽입 이미지

웹폰트 제공사이트 : http://www.fontembedding.com/fonts-and-the-law/

오늘 Ajaxian에 올라온 포스트중에 재미있는 글이 있어 링크를 따라 가다 보니 다음과 같은 글이 있어 포스팅해 본다.
원문 : http://www.alistapart.com/articles/cssatten


웹폰트 사용할시
@font-face { font-family: "Kimberley"; src: url(http://www.princexml.com/fonts/larabie/ » kimberle.ttf) format("truetype"); }
h1 { font-family: "Kimberley", sans-serif }

@font-face와 같이 길게 쓰지 않고 간략한 표현
@import url(http://www.princexml.com/fonts/ » larabie/index.css) all;
h1 { font-family: Goodfish, serif }

W3에서 권장하는 방법
h1 { font-family: "Trebuchet MS", sans-serif; letter-spacing: 0.1em; }
@media all and (web-fonts: "truetype") {
   h1 { font-family: "Primer Apples", sans-serif; letter-spacing: 0.2em; }
}

사용자 삽입 이미지

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).


사용자 삽입 이미지

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).


사용자 삽입 이미지

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).


사용자 삽입 이미지

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).


사용자 삽입 이미지

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).


사용자 삽입 이미지

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).

사용자 삽입 이미지

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).






데꾸벅폰트 다운로드






HTML5에서 Canvas 관련 요약정리 CheatSheet










Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2008.09.22 01:36 akdlfem  댓글주소  수정/삭제  댓글쓰기

    좋은정보 감사합니다~

  2. 2009.02.13 23:59 신고 꿈꾸는 소피  댓글주소  수정/삭제  댓글쓰기

    아주아주 큰 도움이 됐네요.. 감사합니다..