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

킁킁킁헷 2 1298 0 0

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


그리고 font 속성으로는 다음과 같이, 각종 글꼴 스타일을 한꺼번에 지정할 수 있습니다. 좀 복잡한데 순서대로 지정해야 합니다. 

font-style: normal, italic, oblique (이탤릭체 등 지정)
font-variant: normal, small-caps (작은 대문자 표현)
font-weight: normal, bold, bolder, lighter (굵기 지정)
font-size: 10pt 등등 (크기 지정)
font-family: 폰트명 지정



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

 

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


<html>
<head>
<style type="text/css">

body { font-family:'바탕'; }

.font-test { font:bold 24pt '바탕'; }

</style>
</head>


<body>


둥글고 하얀 어떤 <span style="font:24pt '궁서체'">거대한</span> 무엇이 자꾸만 떠올랐는데 마치 이 세상의 것이 아닌 것처럼 여겨졌다.

The quick <span style="font-family:'Comic Sans MS'">brown fox</span> jumps over the lazy dog.

Jackdaws <span class="font-test">love</span> my big sphinx of quartz.

<div class="font-test">Jackdaws love my big sphinx of quartz.</div>


</body>
</html>



예제의 HTML 출력 결과: 

둥글고 하얀 어떤 거대한 무엇이 자꾸만 떠올랐는데 마치 이 세상의 것이 아닌 것처럼 여겨졌다.

The quick brown fox jumps over the lazy dog.

Jackdaws love my big sphinx of quartz.

Jackdaws love my big sphinx of quartz.
 




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


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


 

클래스에 대해


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

예를 들어

.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워드 등의 워드프로세서에서 다양한 폰트 크기와 스타일 등을 미리 테스트해 보는 것이 좋습니다. 

2 Comments
킁킁킁헷 2017.12.11 16:21  
http://webberstudy.com/html-css/css-1/font-style/
킁킁킁헷 2017.12.11 16:39  
http://www.webdesigndev.com/16-gorgeous-web-safe-fonts-to-use-with-css/
제목
Facebook Twitter GooglePlus KakaoStory NaverBand