1. font-family 속성 - 글꼴 지정
font-family:<글꼴이름>[,<글꼴 이름>, <글꼴 이름>]
- 지정한 글꼴이 없을 경우를 대비해 두 번째, 세 번째 글꼴까지 지정해야 한다.
- 두 개 이상의 글꼴 이름을 지정할 때는 쉼표(,)로 구분한다.
- font-family 속성은 상속되기 때문에 <body> 태그 스타일에 한번 정의하면 문서 전체에 적용된다.
- 각 요소마다 다른 글꼴을 사용하고 싶으면 태그 스타일이나 클래스 스타일을 사용한다.
2. @font-face 속성 - 웹 폰트 사용
웹 폰트란 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시키는 방식입니다.
<style>
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); /* 구글 웹 폰트 */
.ng-font {
font-family:'Nanum Gothic', 돋움; /* 웹 폰트 지정 */
}
p {
font-size:30px;
}
</style>
</head>
<body>
<p>브라우저 기본 글꼴 사용</p>
<p class="ng-font">나눔고딕 웹 폰트 사용</p>
글꼴 파일을 업로드해 웹 폰트가 준비되었다면 @font-face 속성을 사용해 웹 폰트를 정의할 수 있습니다.
<style>
@font-face {
font-family: 'trana'; /* 글꼴 */
src: local('trana'),
url('trana.eot'),
url('trana.woff') format('woff'),
url('trana.ttf') format('truetype');
}
.w-font {
font-family:'trana', sans-serif; /* 웹 폰트 지정 */
}
p {
font-size:30px;
}
</style>
</head>
<body>
<p>Using Default Fonts</p>
<p class="w-font">Using Trana Fonts</p>
3. font-size 속성 - 글자크기 조절
font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>
font-size 속성에서 사용하는 속성 값은 다음과 같습니다.
속성 값 |
설명 |
<절대 크기> |
브라우저에서 지정한 글자 크기이다. 사용할 수 있는 값은 xx-small | x-small | small | medium | large | x-large | xx-large이다. |
<상대 크기> |
부모 요소의 글자 크기를 기준으로 크기를 조절한다. 사용할 수 있는 값은 larger | smaller이다. |
<크기> |
브라우저와 상관없이 글자 크기를 지정한다. |
<백분율> |
부모 요소의 글자 크기를 기준으로 해당하는 %를 계산해 표시한다. |
font-size에서 사용할 수 있는 단위는 다음과 같습니다.
단위 |
설명 |
em |
해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절한다. |
ex |
x-heihgt. 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절한다. |
px |
픽셀. 모니터에 따라 상대적 크기가 된다. |
pt |
포인트. 일반 문서에서 많이 사용하는 단위다. |
4. font-weight 속성 - 글자 굵기 지정
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
5. font-variant 속성 - 작은 대문자로 표시
font-variant: nomal | small-caps
6. font-style 속성 - 글자 스타일 지정
font-style: normal | italic | oblique
7. font 속성 - 글꼴 속성을 한꺼번에 묶어 표현
font: <font-style><font-variant><font-weight><font-size/line-height><font-family> | caption | icon | menu | message-box | small-caption | status-bar
특정 키워드를 입력해 그것에 어울리는 글꼴 스타일로 표시할 수도 있습니다.
<style>
p.txt {
font: italic 12px/24px 돋움; /* 글꼴 스타일, 크기, 줄간격, 글꼴 */
}
</style>
</head>
<body>
<p class="txt">여러 요소가 함께 사용된 웹 문서 안에서 텍스트가 눈에 띄게 하려면 내용에 맞는 글꼴과 글자 크기, 그리고 글자색을 선택하는 것이 중요합니다. </p>
<p>이럴 때 사용할 수 있는 것이 글꼴 속성입니다. </p>
<p style="font:caption"> [font:caption] 캡션에 어울리는 글꼴 스타일</p>
<p style="font:icon"> [font:icon] 아이콘에 어울리는 글꼴 스타일</p>
<p style="font:menu"> [font:menu] 드롭다운 메뉴에 어울리는 글꼴 스타일</p>
<p style="font:message-box"> [font:message-box] 대화 상자에 어울리는 글꼴 스타일</p>
<p style="font:small-caption"> [font:small-caption] 작은 캡션에 어울리는 글꼴 스타일</p>
<p style="font:status-bar"> [font:status-bar] 상태표시줄에 어울리는 글꼴 스타일</p>
<출처> Do it! HTML5+CSS3 웹 표준의 정석