60 likes | 311 Views
W3C CSS 2.1 표준. ‘font-family’ property 여러 개의 글꼴을 지정한 경우 지정한 글꼴이 없으면 다음 글꼴 사용 지정한 글꼴이 없는 경우 시스템의 기본 글꼴 사용 generic font families are a fallback mechanism 해당하는 글꼴이 없는 경우 user agent(Web Browser) 가 시스템의 generic font family 에서 선택
E N D
W3C CSS 2.1 표준 • ‘font-family’ property • 여러 개의 글꼴을 지정한 경우 지정한 글꼴이 없으면 다음 글꼴 사용 • 지정한 글꼴이 없는 경우 시스템의 기본 글꼴 사용 • generic font families are a fallback mechanism • 해당하는글꼴이 없는 경우 useragent(Web Browser)가 시스템의 generic font family에서 선택 Reference : W3C CSS2.1 15.Fonts (http://www.w3.org/TR/CSS21/fonts.html#generic-font-families) • Usage) body { font-family : Gill, Helvetica, sans-serif } - 돋움, 고딕 - 바탕 - 필기체에 해당 - 고정폭 서체에 해당
OS 별 기본 한글 글꼴 • Mac OSX Leopard 10.5.2 • Windows • '맑은 고딕' 글꼴은 Vista 이상의 OS에만 기본 설치됨. • Linux- 배포본에 따라 차이. 일반적으로 은글꼴, 백묵 글꼴 설치
User Agent (Web Brower)의 글꼴 설정 • Internet Exploer의기본 글꼴 설정 • Firefox의기본 글꼴 • Google Krom의기본 글꼴 설정
HTML에서의 한글 글꼴 사용 • Fonttag 를사용한 한글 글꼴 변경 • <font face=“글꼴명”>내용</font> • CSS 를사용한 한글 글꼴 변경 • style=“font-family:굴림;” 또는, style=“font-family:Gulim;” • 사용자의 컴퓨터에 설치되어있지 않은 글꼴은 보여줄 수 없음 CSS를 이용한 웹폰트 사용 • 웹폰트 사용하기 • 제작자가 의도한 글꼴을 사용자에게 보여줄 수 있음 • 해당 글꼴을 사용자에게 제공해야 하므로 트래픽을 증가시키는 단점 • 사용 : CSS의 style에 글꼴의 URL 추가 • @font-face {font-family: 글꼴명; src:url(글꼴의 경로);} • 글꼴 이름에 공백이 있는 것, 즉 띄어쓰기가 된 폰트는 반드시 따옴표로 둘러싸 주어야 함
HTML에서의한글 글꼴 사용 웹폰트 설정 body 태그내의 기본 글꼴을 ‘맑은 고딕’으로 지정 classtest class의 글꼴을 ‘궁서’로 지정 webfont class의 글꼴을 웹폰트로 지정
HTML에서의한글 글꼴 사용 InternetExplorer 7 FireFox 3 Google Krom