1. font-family 속성
-
CSS에는 두 가지의 글꼴 집합(font family)이 존재한다.
- generic family : 비슷한 모양을 가지는 글꼴 집합 ("Serif", "Monospace" 등)
- font family : 특정 글꼴 집합 ("Times", "Courier" 등)
-
font-family 속성은 하나의 글꼴만을 설정할 수도 있고, 여러 개의 글꼴을 같이 설정할 수도 있다.
-
font-family 속성값이 여러 개의 글꼴로 설정되어 있으면, 웹 브라우저는 위에서부터 순서대로 글꼴을 읽어 들인다.
-
만약 사용자의 컴퓨터에 첫 번째로 읽어 들인 글꼴이 없으면 다음 글꼴을 확인하게 된다. 이런 방식으로 계속해서 읽어 들인 글꼴이 존재하는지를 확인하여, 읽어 들인 글꼴이 사용자의 컴퓨터에 존재하면 해당 글꼴로 표시하게 된다.
-
글꼴의 이름이 한 단어 이상으로 이루어지면 반드시 따옴표를 사용하여 둘러 쌓아야 하며, 여러 개의 글꼴을 나열할 때에는 쉼표(
,)로 구분 짓는다.
.serif {
font-family: "Times New Roman", Times, serif;
}
.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
2. font-style 속성
- font-style 속성은 주로 이탤릭체를 사용하기 위해 사용하며, 3가지의 속성값을 가진다.
1) normal
- 텍스트에 어떠한 스타일도 적용하지 않는다.
.normal {
font-style: normal;
}
2) italic
- 텍스트를 이탤릭체로 나타낸다.
.italic {
font-style: italic;
}
3) oblique
- 텍스트를 기울인다. 이 속성값은 italic과 매우 유사하지만 지원하는 브라우저가 거의 없다.
.oblique {
font-style: oblique;
}
3. font-variant 속성
-
font-variant 속성은 속성값이 small-caps로 설정되면, 텍스트에 포함된 영문자 중 모든 소문자를 작은 대문자(small-caps) 글꼴로 변경시킵니다. 이때 영문자 중 대문자는 기존 크기 그대로 출력된다.
-
작은 대문자(small-caps) 글꼴이란 텍스트의 기존 대문자보다는 약간 작은 크기의 대문자를 의미한다.
.normal {
font-variant: normal;
}
/* 적용전 : Small-Caps*/
.smallCaps {
font-variant: small-caps;
}
4. font-weight 속성
-
font-weight 속성은 텍스트를 얼마나 두껍게 표현할지를 설정한다.
-
사용할 수 있는 속성값에는
lighter,normal,bold,bolder등이 있으며, 100, 200, 300, ... , 900 등과 같이 숫자로 텍스트의 두께를 설정할 수도 있다.
1) normal
- 보통 굵기이다. 숫자 400과 같다.
.normal {
font-weight: normal;
}
2) bold
- 굵은 굵기이다. 숫자 700과 같다.
.bold {
font-weight: bold;
}
3) bolder
- 상속된 값보다 굵은 굵기이다.
.bolder {
font-weight: bolder;
}
4) lighter
- 상속된 값보다 얇은 굵기이다.
.lighter {
font-weight: lighter;
}
5) number
- 굵기를 숫자로 지정할 수 있다.
.number {
font-weight: 600;
}
5. font-size 속성
-
font-size 속성은 텍스트의 크기를 설정한다. font-size 속성값은 절대적 크기와 상태적 크기 두 가지 방식으로 표현할 수 있다.
-
절대적 크기는 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용한다. 절대적 크기로 설정된 텍스트는 모든 웹 브라우저에서 같은 크기로 표현된다.
-
상대적 크기는 텍스트를 둘러싸고 있는 HTML 요소들의 크기에 따라 텍스트의 크기도 같이 변하는 방식이다. 또한, 사용자가 웹 브라우저를 통해 텍스트의 크기를 직접 변경할 수도 있다.
1) font-size의 크기 단위
-
백분율 단위(
%)는 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정한다. -
배수 단위(
em)는 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정한다. 배수 단위(em)로 설정된 텍스트는 사용자가 웹 브라우저를 통해 크기를 재조정할 수 있다. -
픽셀 단위(
px)는 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정한다.
#large {
font-size: 2.5em;
}
#small {
font-size: 0.7em;
}
#fixed {
font-size: 20px;
}
