HTML 한글 글꼴

log 2015. 5. 4. 13:14

1. W3C표준 CSS 2.1

'font-family'

• Value : [[ | ][, <family-name>|<generic-family>]*] | inherit
• Initial : depends on user agent
• Applies to : all elements
• Inherited : yes
• Percentages : N/A
• Media : visual
• Computed value : as specified
• Usage) body{font-family:Gill, Helvetica, sans-serif}

<family-name> 

The name of a font family of choice. In the last example. "Gill" and "Helvetica" are font families.

<generic-family>

In the example above, the last value is a generic family name. The following generic families are defined:

• 'serif'(e.g. Times) : 돋움, 고딕
• 'sans-serif'(e.g Helvetica) : 바탕
• 'cursive'(e.g Zapf-Chancery) : 필기체에 해당
• 'fantasy'(e.g Western)
• 'monospace'(e.g Courier) : 고정폭 서체에 해당
• 여러개의 글꼴을 지정 한 경우, 지정한 글꼴이 없으면 다음 글꼴을 사용
• 지정한 글꼴이 없는 경우 시스템의 기본 글꼴 사용
• generic font families are a fallback mechanism, 해당하는 글꼴이 없는 경우 user agent(Web Browser)가 시스템의 generic font family에서 선택

2. OS별 기본 한글 글꼴

Mac OSX Leopard 10.5.2

Helvetica / Times / AppleGothic / AppleMyungjo / #궁서체 / #헤드라인A / PC명조 / #필기체

Windows

돋움(Dotum) 돋움체(DotumChe) / 굴림(Culim) 굴림체(CulimChe) / 바탕(Batang) 바탕체(BatangChe) / 궁서(Gungsuh) 궁서체(GungsuhChe) / 새굴림(New Gulim) 맑은고딕(Malgun Gothic)
맑은 고딕 글꼴은 Vista 이상의 OS에만 기본 설치

Linux

배포본에 따라 차이. 일반적으로 은글꼴, 백묵 글꼴 설치

3. User Agent(Web Browser)의 글꼴 설정

Firefox

• 가변폭 글꼴 : 고딕체
• 명조체 : 바탕
• 고딕체 : 굴림
• 고정폭 글꼴 : 굴림체
• 크기 : 16
• 문자 인코딩 : 한국어(EUC-KR)

Google Chrome

• 세리프체 : Batang, 16pt
• 산세리프체 : Gulim, 16pt
• 고정폭 글꼴 : GulimChe, 13pt

Internet Exploer

• 웹페이지 글꼴 : 굴림
• 일반 텍스트 글꼴 : 굴림체

4. HTML에서의 한글 글꼴 사용

사용자의 컴퓨터에 설치되어 있지 않은 글꼴은 보여 줄수 없다.
글꼴의 이름에 공백, 즉 띄어쓰기가 된 폰트는 반드시 따옴표로 지정 해 주어야 한다.

Font tag를 이용한 한글 글꼴 변경

<font face="글꼴명"></font>

CSS를 이용한 한글 글꼴 변경

style="font-family:굴림;" 
style="font-family:Gulim;"

웹폰트를 이용한 한글 글꼴 변경

제작자가 의도한 글꼴을 사용자에게 서비스 할 수 있다.
해당 글꼴을 사용자에게 제공해야 하므로 트래픽을 증가 시킨다(단점)
사용 : css style에 글꼴의 url추가

@font-face{font-family:글꼴명; src:url(글꼴의 경로);}