[CSS] Chapter 05. font의 속성

1. 크기: font-size

 폰트의 크기를 지정하는 방법으로 px 혹은 pt 단위로 지정이 가능하지만, 최근에 사용자의 출력 장치가 다양하여 비율 대비 문자 크기 지정을 많이 사용한다.

 

◍ em: 대문자 M의 크기가 1em이다.  

◍ rem: 페이지의 처음 문자 크기를 1rem이라고 한다.

◍ ex: 소문자 x의 크기를 1ex라고 한다.

◍ px: 모니터의 화소 단위를 기준으로 출력되며, 모니터 1화소가 1px이다.

◍ pt: 워드나 일부 문서의 글자 크기를 말한다. 타문서와 통일 규격을 위해 사용된다.

 

간략하게 지정하는 font-size는 아래의 정보를 참고하여 지정할 수 있다. 

◍ xx-small > x-small > small > medium > large > x-large > xx-large

 

2. 무게: font-weight

폰트의 무게감을 설정할 수 있다. 글자의 크기만이 아니라 굵기 까지 지정이 가능하며 굵고 클수록 무게가 많이 나가 보인다.

100~900: 숫자가 높아질수록 무게감이 늘어난다. bold는 일반적으로 700정도에 해당한다.

lighter < normal < bold < bolder 순으로 오른쪽으로 갈수록 무게감이 늘어난다.

inherit는 기존 폰트의 정보를 상속하는 방식으로 크기가 결정된다. 

 

3. 폰트의 모양: font-family 등 

폰트의 모양을 지정하는 방법은 직접 경로 지정과 웹 경로지정이 있다.

직접 경로 지정은 인터넷 연결 없이도 구현에 어려움이 없지만, 웹 연결 방법은 인터넷이 연결되지 않은 상태면 사용이 어렵다. 

 

3.1. 웹 경로 지정을 통한 폰트 사용

무료로 배포하는 폰트 페이지에서 해당 폰트가 저장된 서버 혹은 url의 정보를 수취하여 적용할 수 있다.

경로 지정은 @import url 이하를 통해 적용한다.

컴퓨터가 데이터를 로드할 때, 해당 페이지의 데이터를 먼저 접속하여 지정된 경로를 통해서 데이터를 페이지에 구현한다. 

 

@import url('https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap');

                #dokdo {

                    font-family: 'East Sea Dokdo', cursive;

                    font-size:10em;

 

3.2. 직접 경로 지정을 통한 폰트 사용

폰트 사이트에서 제공하는 url을 바탕으로 해당 폰트 모양을 구현할 수 있다.

다만 인터넷 속도에 따라 연동 및 구현되는 시간이 다소 소요될 수 있다.