W3C CSS 2.1 표준 ‘font-family’ property

Presentation on theme: "W3C CSS 2.1 표준 ‘font-family’ property"— Presentation transcript:

1 W3C CSS 2.1 표준 ‘font-family’ property
여러 개의 글꼴을 지정한 경우 지정한 글꼴이 없으면 다음 글꼴 사용 지정한 글꼴이 없는 경우 시스템의 기본 글꼴 사용 generic font families are a fallback mechanism 해당하는 글꼴이 없는 경우 user agent(Web Browser)가 시스템의 generic font family에서 선택 Reference : W3C CSS Fonts ( Usage) body { font-family : Gill, Helvetica, sans-serif } - 돋움, 고딕 - 바탕 - 필기체에 해당 - 고정폭 서체에 해당

2 OS 별 기본 한글 글꼴 Mac OSX Leopard 10.5.2 Windows
'맑은 고딕' 글꼴은 Vista 이상의 OS에만 기본 설치됨. Linux - 배포본에 따라 차이. 일반적으로 은글꼴, 백묵 글꼴 설치 돋움 (Dotum) 돋움체 (DotumChe) 굴림 (Gulim) 굴림체 (GulimChe) 바탕 (Batang) 바탕체 (BatangChe) 궁서 (Gungsuh) 궁서체 (GungsuhChe) 새굴림 (New Gulim) 맑은 고딕 (Malgun Gothic)

3 User Agent (Web Brower)의 글꼴 설정
Firefox의 기본 글꼴 Internet Exploer의 기본 글꼴 설정 Google Krom의 기본 글꼴 설정

4 HTML에서의 한글 글꼴 사용 CSS를 이용한 웹폰트 사용 Font tag 를 사용한 한글 글꼴 변경
<font face=“글꼴명”>내용</font> CSS 를 사용한 한글 글꼴 변경 style=“font-family:굴림;” 또는, style=“font-family:Gulim;” 사용자의 컴퓨터에 설치되어있지 않은 글꼴은 보여줄 수 없음 CSS를 이용한 웹폰트 사용 웹폰트 사용하기 제작자가 의도한 글꼴을 사용자에게 보여줄 수 있음 해당 글꼴을 사용자에게 제공해야 하므로 트래픽을 증가시키는 단점 사용 : CSS의 style에 글꼴의 URL 추가 @font-face {font-family: 글꼴명; src:url(글꼴의 경로);} 글꼴 이름에 공백이 있는 것, 즉 띄어쓰기가 된 폰트는 반드시 따옴표로 둘러싸 주어야 함

5 HTML에서의 한글 글꼴 사용 웹폰트 설정 body 태그내의 기본 글꼴을 ‘맑은 고딕’으로 지정
classtest class의 글꼴을 ‘궁서’로 지정 webfont class의 글꼴을 웹폰트로 지정

6 HTML에서의 한글 글꼴 사용 InternetExplorer 7 FireFox 3 Google Krom