HTML-CSS] CSS 글꼴; 스타일 시트로 폰트(FONT) 지정하는 법

CSS의 font-family 속성으로 "폰트명"을 지정할 수 있습니다. 한글이나, 또는 공백이 들어간 폰트명은 작은따옴표(')로 둘러싸 주는 것이 좋습니다.

font-size 속성으로 폰트 크기를 지정할 수 있습니다.


그리고 font 속성으로는 다음과 같이, 각종 글꼴 스타일을 한꺼번에 지정할 수 있습니다.
아래 5가지 중에서 불필요한 것은 생략해도 되지만, 반드시 순서대로 지정해야 합니다.

위의 목록에서, 1번째 2번째는 거의 안 쓰이고
3번째인 "font-weight (글꼴 굵기)"는 주로 볼드체(굵게 강조된 서체)가 필요할 때만 사용하고

4번째인 font-size 와 5번째인 font-family 를 순서대로 지정하는 것이 보통입니다.

예를 들어,
폰트 사이즈는 12pt 이고
폰트 이름은 '바탕' 일 때는
      font:12pt '바탕'
이렇게 지정합니다.



다음 예제를 보면 쉽게 알 수 있습니다.

CSS 스타일 시트: 폰트 종류, 크기 설정 예제

예제 파일명: example.html


예제의 HTML 출력 결과:



body { font-family:'바탕'; }
이것은 body 태그 전체에, 즉 페이지 전체를 '바탕'이라는 한글 명조체 글꼴로 지정하라는 뜻


.font-test { font:bold 24pt '바탕'; }
이번에는 클래스를 만들었습니다. 폰트를 굵게(bold), 폰트 크기는 24포인트, 폰트명은 '바탕'을 지정했습니다. 참고로, '바탕'은 '바탕체'와 달리, 간격이 일정하지 않습니다. 그래서 본문용으로는 좋지만, 프로그래밍 소스처럼 간격이 일정해야 하는 곳에는 적당하지 않습니다.
특정 글꼴을 지정해야 할 곳에
<span class="font-test">...
이렇게 사용하면 됩니다. (클래스명 앞에 붙은 마침표를 떼고)

클래스 없이 그냥 직접 스타일을 적용하려면, 위의 예제에서처럼
<span style="font:24pt '궁서체'">...
이렇게 style= 을 사용합니다.

클래스에 대해

자신이 즐겨 쓰는 폰트 스타일을 클래스로 만들어 두고 사용하면 편리합니다.

예를 들어

.us-italic { font-family:'Georgia', serif; font-style:italic }
이것은 영문 이탤릭체 클래스이고

.us-bold { font-family:Arial, sans-serif; font-weight:bold }
영문 볼드체(굵게 나오는 글씨)

.k-italic { font-style:italic; font-family:'Malgun Gothic'; }
이것은 한글 클리어타입 폰트인 '맑은 고딕'의 이탤릭체를 미리 정의해 놓은 것입니다.

꼭 이렇게 할 필요는 없고, 자신의 취향에 맞게 지정하면 됩니다.

글꼴 크기에 대해

본문용 글꼴 크기는 10pt 가 보통입니다. 9pt 이하는 고해상도 모니터에서는 잘 보이지 않습니다.

좀더 큰 본문용은 12pt 이고, 제목은 24pt 정도로 했을 때 보기 좋게 출력됩니다.
MS워드 등의 워드프로세서에서 다양한 폰트 크기와 스타일 등을 미리 테스트해 보는 것이 좋습니다.



▶▶ HTML-CSS] 글자 색깔 지정하기, 글자색 변경 - Color 컬러 지정