CSS Property - FONT 관련 속성 및 웹폰트 설정하기

 

 

CSS Font Properties

 

---

 

• 웹페이지에서 글꼴을 지정하는 속성입니다.
• 글꼴의 종류, 굵기, 기울임꼴 등을 설정할 수 있습니다.
• 오늘은 FONT 에 관련된 스타일링을 한번 알아보겠습니다.

 

상세한 스펙을 보시려면 w3schools.com 에 잘 정리되어있는 CSS FONT Property page를 걸어둘게요~
https://www.w3schools.com/css/css_font.asp

 

할수있어.. 포기하지마...

 

 

A. FONT 관련 CSS

글자에 관련된 속성입니다.  자주사용하는것 말고는 간혹가다 꺼내쓰게 되는데요, 각 속성마다 지정할 수 있는 속성의 방식과 값들이 있습니다. 추가 속성들과 값들은  참조링크에서 확인하실 수 있습니다.

구분	Property name	사용 예	Description
글꼴	font-family	body { font-family: 'Noto Sans KR', sans-serif; }	글자관련된 속성들은 대부분 상속이 되기때문에, 홈페이지의 전체적인 폰트설정은 는 body태그에 선언한다. Noto Sans KR 폰트를 지정하고, 만약에 글꼴이 없다면 로컬컴퓨터에 설치된 폰트중에 꾸밈이없는(sans-serif) 글꼴로 대체하라는 뜻히다. 꾸밈이라는 것은 글꼴의 끝을 말하며, sans-serif의 대표적인 글꼴은 고딕체류를 말한다.
기울임	font-style	p { font-style:italic } address { font-style:normal }	p태그를 기울임 꼴로 표시한다. address 태그의 기본 기울임꼴을 보통으로 표시한다.
크기	font-size	p { font-size : 20px; } p { font-size : 2em; } p { font-size : 1.5rem; } p { font-size : 2vw; }	폰트사이즈는 기본적으로 글자의 높이를 말한다. 단, em단위를 사용할 때에는 영문 대문자 'M' 의 너비를 기준으로 한다. 하여 한글일때보다 특수한 영문일때에 많이 다르게 느낄 수 도있다.  하지만 별 신경쓰지않고 많이 쓴다. 부모에게 상속받은 글자크기를 기준으로 한다. 2em 은 두배라는 뜻. rem은 html에 선언된 글자사이즈를 기준으로한 배수이다.  vw 또는 vh는 웹페이지를 보고있는 디바이스의 viewport를 기준으로 하는 백분율이다. 2vw === 뷰포트 너비의 20% 길이만큼
영문	font-variant	p { font-variant : small-caps }	영문에만 적용되며, 모두 대문자로 표시하지만, 소문자는 글자의 크기를 소문자로 유지하면서 대문자가 된다. 소제목등에 더러 사용된다.

 

B. Font 축약형

- 많은 css를 축약형으로 쓸 수 있는데, FONT만 유일하게 전체 순서와, 필수 속성들이 있어야 사용이 가능하니 

사용법을 잘 숙지한 후 써야한다.

- FONT 는 font-size와 font-family가 필수로 적혀있어야만 적용이 된다.

- 또한 line-height을 font 축약형에 같이 사용할 경우 font-size/line-height 이렇게 바로 붙여서 사용해야 한다.

 

Font 축약형 사용방법 참조 사이트 - 바로가기

 

 

C. Google 웹폰트 사용

- 사용자의 컴퓨터에 설치되지않은 폰트로 지정할 수 있기때문에, 웹폰트를 사용하는데, 구글에서 무료로 업로드 해준 웹폰트를 많이 사용한다.

- 한글폰트같은 경우는 '눈누폰트'에서 무료 웹폰트를 제공하고 있다.

구글 웹폰트 사용방법 참조 사이트 - 바로가기

 

D. 내가 원하는 폰트파일로 웹폰트 만들어서 사용하기

- TTF 파일이나 OTF 파일을 웹폰트로 변경하여, 서버에 올려두고 사용하기도 합니다.

- 상업적으로 무료인 폰트 또는 내가 구매한 폰트라고 하더라도 내가 마음대로 웹폰트로 변환하여 서버에 올리면 불법배포가 되니 주의하세요.
( 웹폰트로 만들어도 되는 폰트인지 꼭 확인후 사용하세요, 폰트를 구매하거나 다운받을때 저작권범위에 적혀있어요 )

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.

하여 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.