CSS font 속성

<Today's Goals>

• 글꼴 관련 스타일
• font-family  속성
• @font-face  속성 
• font-size 속성
• font-weight 속성
• font-style 속성
• font-variant 속성
• font  속성

<What i learned>

• font-*속성은 사용하는 값들이 다르기 때문에 한번에 묶어서 사용할 수 있다. /슬래쉬로 연결하면 훨씬 간결하고 편하다.
• 글꼴 파일을 먼저 선언하는 것으로 다른 결과를 낼 수 있다. 먼저 선언 한 woff 파일만 다운로드되고 그 후에 선언한 ttf는 다운로드 되지 않는 것. 효율적인 처리방식이라고 생각한다.

<Questions>

Q : <em>,<i> 태그를 이용해 이탤릭체를 표현하는 것과 font-style 속성으로 이탤릭체를 표현하는 것에 차이점은?

A :  웹 접근성과 연관되어있다.

• <em> : 텍스트의 강세를 표현할 때 사용.(<strong>보다는 강하지 않다.)  스크린 리더기가 읽을 때 <em>를 강조하여 읽는다.
• <i> :  italic의 약자로 기울임꼴로 표시된다. 기술 용어, 외국어 구절, 등장인물의 생각 등 특정 이유로 주위와 구분을 해야 할 때 사용한다.

단순히 기울임꼴 글씨체가 필요할 때에는 <i>, <em>을 사용하기보다 CSS의 "font-style: italic;"을 활용하도록한다.

 

Q : font-variant 속성은 도대체 어디에 쓰이는가? 

---

<텍스트 관련 스타일>

글꼴 관련 스타일

 

font-family  속성 - 글꼴 지정

• 웹 문서에서 사용할 글꼴을 지정한다.
• 웹 문서에서 글꼴을 지정할 때는 한 가지 글꼴만 지정하기도 하지만 지정한 글꼴이 없을 경우를 대비해 두번째, 세번째 글꼴까지 지정한다.

태그 {font-family:글꼴 이름;}
태그 { font-family:"글꼴1", 글꼴2, 글꼴3 }

@font-face  속성 - 웹 폰트

• 웹 폰트 : 웹문서를 작성할 때 글꼴 정보도 함께 저장해서 사용자가 웹문서에 접속하면 글꼴을 사용자 시스템으로 다운도르 시키는 방식.
• 컴퓨터에서 사용하는 글꼴은 트루 타입 유형(.ttf)으로 용량이커서 웹에서는 eot(Embedded Open Type)와 woff(Web Open Front Format)파일이 가장 많이 사용된다. ttf 파일을 eot 또는 woff로 변환해 웹 폰트로 사용할 경우 반드시 사용에 대한 허락을 받아야 한다. 글꼴 사용에 대한 사용권 범위가 까다롭기 떄문에 각별한 주의가 필요하다.

웹 폰트 적용하는 방법

• 웹 폰트 소스를 복사해 <style> 태그에 붙여넣고, {font-family:폰트이름;} 폰트를 적용한다.
• 글꼴 파일을 업로드하고 @font-face 속성을 사용해 웹 폰트를 정의한다.

<style>
	@font-face {
    	font-family:'글꼴 이름'; /* 글꼴 */
       src: local('글꼴 이름'),
          url('글꼴 이름.eot'),
          url('글꼴 이름.woff') format('woff'), 
          url('글꼴 이름.ttf') format('truetype');
    }
    .w-font {
       font-family:'글꼴 이름', 글꼴2; /* 웹 폰트 지정 */
    }
       
</style>

대부분의 브라우저에서 지원하는 woff 글꼴 파일을 먼저 선언하면, woff 형식을 지원하는 브라우저는 woff 파일을 다운로드하고 그 후에 선언된 ttf 파일은 다운로드 하지 않는다.

---

font-size  속성 - 글자 크기 

글자 크기는 픽셀이나 포인트를 비롯한 여러 단위로 지정이 가능하며 백분율도 사용한다.

 

속성 값

• <절대 크기> 브라우저에서 지정한 글자 크기 / xx-small~medium~xx-large까지 7단계
• <상대 크기> 부모 요소의 글자 크기를 기준으로 '더 크게' 또는 '더 작게' 표시 / larger, smaller
• <크기> 브라우저와 상관없이 글자 크기를  직접 지정
• <백분율> 부모 요소의 글자 크기를 기준으로 해당하는 % ( %를 함께 표기해야한다.

단위

• em : 해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절한다. (16px이 기본 값 1em)
• ex : x-height. 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절한다.
• px : 픽셀. 모니터에 따라 상대적이다.
• pt : 포인트. 일반 문서에서 많이 사용하는 단위이다.

 

font-weight  속성 - 글자 굵기 

속성 값

• normal : 일반적인 형태
• bold/ lighter/ bolder  :굵게 / 원래 굵기보다 더 가늘게 / 원래 굵기보다 더 굵게
• 100~900 사이의 수치 : 400은 nomal, 700은 bold 

 

font-variant  속성 - 작은 대문자

영어 글꼴에서 '작은 대문자'라는 독특한 설정이 있는데, 대문자를 소문자 크기에 맞추어 작게 표시하는 것이다.

태그 { font-variant: small-caps; }

 

font-style  속성 - 글자 스타일

이탤릭체로 표시할 수 있다.

태그 {font-style: italic | oblique; }

 

font  속성 - 글꼴 속성 묶어서 표현하기

속성을 한꺼번에 묶어 약식으로 표현할 수 있다.

또는 특정 키워드를 입력해 따로 표시할 수도 있다.

• font-* font로 시작하는 글꼴 관련 속성을 한꺼번에 나열한다.
• caption, icon, menu, message-box, small-caption, status-bar
• size와 height는 12px/24px 처럼 /슬래쉬로 연결해서 함께 표현한다.