font

목차
1. font 스타일은?
2. font-size
3. font-weight
4. font-style
5. font-family

 

1. font 스타일은?

텍스트의 모양을 변경하는 스타일 중 하나로 글씨의 크기를 키우거나 강조할 수 있다.

 

2. font-size

선택자나 요소 안의 글자 크기를 지정하는 스타일 속성으로 기본 사이즈는 16px이다.

<태그명 style="font-size:지정할 크기"></태그명>

 

ex)

기본 사이즈

변경된 사이즈

 

기본 사이즈의 글자와 변경된 사이즈를 비교하여 달라진 것을 확인하였다. 예제에서는 20px로 지정하였지만 px, %, rem 등으로 수정할 수 있다.

 

3. font-weight

선택자나 요소 안의 글자 굵기를 지정하는 속성으로 기본값은 400이다. 주로 특정 텍스트를 강조하기 위해 사용된다.

<태그명 style="font-weight : 속성값">텍스트</태그명>

 

ex)

기본 굵기

변경된 굵기

 

기본 텍스트와 굵기가 bold로 변경된 차이를 확인하였다. 속성에 대한 여러 값을 확인하고 필요에 따라 판단하여 사용하면 효과적으로 문장을 꾸밀 수 있다. 

속성에 대한 숫자 및 키워드 숫자 표현시 100~900까지 굵기설정 ex) font-weight:400; 키워드 bold    => 숫자 700에 해당하는 해당하는 굵기 ex) font-weight:bold; bolder  => 상위 요소보다 더 높은 굵기 ex) font-weight:bolder; lighter => 상위 요소보다 더 가는 굵기를 지정 ex) font-weight:lighter;

 

4. font-style

텍스트의 기울기를 지정하는 스타일 속성이다.

<태그명 style="font-style : 속성값">텍스트</태그명>

ex)

텍스트

텍스트

속성값 nomal   => 기울기 없음  italic  => 이탤릭체로 텍스트가 기울어짐 oblique => 이탤릭체와 비슷하지만 지원하지 않는 브라우저에서 경사체로 표시

 

5. font-family

글에 대한 서체를 지정하는 스타일 속성이다. 흔히 이야기하는 궁서체, 고딕체 등과 같은 텍스트의 모양이 바뀐다.

<태그명 style="font-family : 속성값">텍스트</태그명>

ex)

기본 텍스트

서체 적용 텍스트

이처럼 원하는 여러 서체를 사용하여 글을 구성할 수 있다. 기본적으로 지원하는 서체들이 있으며 필요에 따라 외부 서체를 다운받아 사용하는 것도 가능하다.