CSS 글꼴(폰트) 관련 스타일, font-family 속성 등

CSS(Cascading Style Sheet)에서 폰트 속성은 글꼴과 관련된 스타일 속성을 의미합니다. font로 시작하는 속성은 글꼴과 관련된 스타일이라고 생각하시면 됩니다. 그럼 font-family, font-size, font-style, font-weight 속성에 대해서 알아보죠.

글꼴(폰트) 스타일

font-family 속성

☞ 글꼴을 지정하는 스타일 속성입니다. 사용자 컴퓨터에 설치된 폰트를 사용합니다.

▼ 사용자 PC에서 설치된 폰트

1. 소스 코드

<style>
body {
    font-family: 돋움, 굴림, Arial, sans-serif, serif ;
}
</style>

2. 실행 결과

[설명]

7행 : 지정한 글꼴이 사용자 PC에 설치가 되어 있지 않는 경우를 대비하여 font-family 속성에 여러 개 폰트를 지정합니다. 예시로 사용자 PC에 돋움 폰트가 설치된 경우 돋움 폰트로 없으면 다음에 지정한 폰트로 적용이 됩니다. 그리고 상속이 되어 body 태그 안에 속하는 모든 태그에 적용이 됩니다.

font-size 속성

☞ 글자의 크기를 지정하는 스타일 속성입니다. 글자 크기를 단위로 지정하거나 또는 키워드를 사용해도 됩니다.

▼ font-size 속성 키워드

크기 순서 : xx-small < x-small < small < medium < large < x-large < xx-large

1. 소스 코드

<p style="font-size: x-large">글자 크기</p>
<p style="font-size: small">글자 크기</p>
<p style="font-size: 20px">글자 크기</p>
<p style="font-size: 16pt">글자 크기</p>
<p style="font-size: 1.5em">글자 크기</p>
<p style="font-size: 1.5rem">글자 크기</p>
<p style="font-size: 2ex">글자 크기</p>

2. 실행 결과

[설명]

7행 ~ 13행 : 사용하는 단위로는 예전에는 절대 크기인 px(픽셀), pt(포인트)를 많이 사용했지만 요즘에는 모바일 기기를 고려하여 상대 크기인 em, rem을 많이 사용합니다. 참고로 1em은 16px, 12pt와 같습니다.

font-style 속성

☞ 글자를 이탤릭체로 표시할 때 지정하는 스타일 속성입니다.

1. 소스 코드

<p style="font-style: italic;">글자 이탤릭체</p>

2. 실행 결과

font-weight 속성

☞ 글자의 굵기를 지정하는 스타일 속성입니다. 키워드(bold, bolder, lighter, normal) 또는 숫자값을 사용하면 됩니다. 참고로 400은 normal, 700은 bold에 해당합니다.

1. 소스 코드

<p style="font-weight:600;">글자 굵기</p>
<p style="font-weight:900;">글자 굵기</p>
<p style="font-weight:bold;">글자 굵기</p>
<p style="font-weight:lighter;">글자 굵기</p>

2. 실행 결과