공유자료실 | 와우비즈(주)

구글 한글폰트 사용하기 예제

글 올린 시간 2015-07-23 글 쓴이 -

구글웹폰트 api를 이용하여 나눔폰트 적용하기

아래 코드를 style.css 파일 상단에 넣고, 폰트를 적용하고 싶은 클래스에 각각 나눔폰트를 지정해주면 됩니다.

@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/jejuhallasan.css);
@import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
@import url(http://fonts.googleapis.com/earlyaccess/kopubbatang.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);

font-family: 'Nanum Gothic','Nanum Brush Script','Nanum Gothic Coding','Nanum Myeongjo','Nanum Pen Script';

창의적 지식의 가치창출!!, 행복한 자기혁신!! Hanna

창의적 지식의 가치창출!!, 행복한 자기혁신!! Jeju Myeongjo

창의적 지식의 가치창출!!, 행복한 자기혁신!! Jeju Gothic

창의적 지식의 가치창출!!, 행복한 자기혁신!! Jeju Hallasan

창의적 지식의 가치창출!!, 행복한 자기혁신!! KoPub Batang

창의적 지식의 가치창출!!, 행복한 자기혁신!! Nanum Myeongjo

창의적 지식의 가치창출!!, 행복한 자기혁신!! Nanum Gothic

창의적 지식의 가치창출!!, 행복한 자기혁신!! Nanum Brush Script

창의적 지식의 가치창출!!, 행복한 자기혁신!! Nanum Pen Script

창의적 지식의 가치창출!!, 행복한 자기혁신!! Nanum Gothic Coding

Posted in 개발참고

CSS 단위별 폰트사이즈(px,pt,em,%)

글 올린 시간 2015-07-23 글 쓴이 -

관리자

CSS 단위별 폰트사이즈(px,pt,em,%)

퍼블리싱/HTML&CSS 2012/01/12 14:18

일반적으로 많은 사람들이 em단위를 쓰면 해상도에 따라서 크기가 달라진다고 오해하는 경우가 많습니다.

하지만 em을 쓰는 이유는 IE6과 같이 zoom기능이 없는 브라우저에서 브라우저의 글꼴 크기 옵션을 조절했을 때

동작하게 하기 위함입니다.

최근의 브라우저들이 모두 zoom 기능을 지원하고 있는 덕분에, 사실 em대신 px을 사용해도 무방합니다.

em으로 취할 수 있는 이득이 거의 없기 때문이지요.

하지만 Responsive Web Design을 추구하는 작업을 하시거나,

화면 크기에 따라서 동적으로 body의 font-size를 조절하는 특수한 작업을 하실 경우에는

em을 활용하여 scaleable한 UI를 구성할 수도 있습니다.

또한 해외 웹사이트의 대부분이 em 을 사용하며, 유동성 부분 때문에 em이 표준으로 자리잡아가고 있습니다.

pt : points(포인트) – 1포인트는 0.72인치

px : pixels(픽셀) – 화면 해상도에 대한 상대크기

%, em – 지정되거나 상속받은 (또는 상위 엘리먼트)에 대한 백분율 상대 크기

pixels	ems	perecent	points
6px	0.375em	37.5%	5pt
7px	0.438em	43.8%	5pt
8px	0.5em	50%	6pt
9px	0.563em	56.3%	7pt
10px	0.625em	62.5%	8pt
11px	0.688em	68.8%	8pt
12px	0.75em	75%	9pt
13px	0.813em	81.3%	10pt
14px	0.875em	87.5%	11pt
15px	0.938em	93.8%	11pt
16px	1em	100%	12pt
17px	1.063em	106.3%	13pt
18px	1.125em	112.5%	14Pt
19px	1.188em	118.8%	14pt
20px	1.25em	125%	15pt
21px	1.313em	131.3%	16pt
22px	1.375em	137.5%	17pt
23px	1.438em	143.8%	17pt
24px	1.5em	150%	18pt