티스토리 뷰

WEB2.0/웹표준

CSS로 폰트 순서 정의하기

나를찾는아이 2009. 1. 20. 16:51
728x90
반응형

CSS2에서 정의된 font family 속성이 있습니다.

http://trio.co.kr/webrefer/css2/fonts.html#font-family-prop


BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }


font-family 속성은 위와 같이 속성값으로, 폰트명을 나열할 수 있습니다.

가장 먼저 언급된 폰트로 웹페이지의 텍스트가 보여지며,

해당 폰트가 설치되어있지 않은 경우에는 그 다음순서에 언급된 폰트로 텍스트를 보여줍니다.


xp 이하버전의 윈도우즈에는 한글에 대한 폰트가 굴림, 돋움만이 있었는데, 비스타에서 맑은 고딕이 추가되고,

요즘에는 네이버 또는 여러 곳에서 배포되는 무료폰트덕에

많은 사용자들이 좀 더 많은 폰트를 PC에 설치하여 사용하고 있습니다.


typography 라는 말이 있듯이 디자인에서 글꼴이라는 것은 정말로 중요한 역할을 합니다.

디자이너 입장에서는 당연히 좀더 내가 원하는 폰트로 텍스트를 사용자가 보았으면 하는 바람이지만,

모든 사람의 피씨, 플랫폼에 이 폰트가 설치되어있으리라는 보장이 없습니다.


그래서 font-family 속성값으로 대안 폰트를 설정해주는것이 일반적입니다.

그럼 그 순서는 어떻게 하는 것이 좋을까요?


Michael Tuck은 다음과 같은 2가지의 순서(stack)을 소개하였습니다.



1. 원하는 폰트, 근접한 대안폰트, 비교적 플랫폼 커버리지가 넓은 폰트, (크로스플랫폼한)공통적인 폰트, 일반폰트

2. 윈도우폰트, 맥폰트, 리눅스폰트, 영역이 넓은 폰트, 일반폰트


그리고 8개의 font stack 예제를 함께 소개하고 있습니다.


/****************
 * From the article "8 Definitive Web Font Stacks"
 * by Michael Tuck
 *http://www.sitepoint.com/article/eight-definitive-font-stacks
 * Copyright SitePoint 2008
 */

/* Times New Roman-based stack */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

/* Traditional Garamond-based serif stack */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif;

/* Verdana-based sans serif stack */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;

/* Trebuchet-based sans serif stack */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;

/* Impact-based sans serif stack */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif;

/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;





디자이너 여러분들도 국내환경(한글)에는 적용하기 어렵겠지만,

영어권에서는 정말로 많은 폰트가 있으니, 이러한 font stack을 고려하셔서 작업하는것이 보다 넓은 시야를 갖는데 도움이 되리라 생각합니다.






엮인글 : 8 Definitive Web Font Stacks

728x90
반응형
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함