CSS 글꼴 속성은 글꼴 모음, 굵기, 크기 및 텍스트 스타일을 정의합니다.
CSS에는 두 가지 유형의 글꼴 패밀리 이름이 있습니다.
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman ,Georgia | 세리프 글꼴의 끝에 일부 문자의 줄이 있음 |
| Sans-serif | Arial,Verdana | 이 글꼴은 문자 끝에 줄이 없습니다. |
| Monospace | Courier New,Lucida Console | 모든 모노 문자 너비가 동일합니다. |
텍스트의 글꼴 모음은 font-family속성으로 설정됩니다 .
이 font-family속성은 “대체 시스템”으로 여러 글꼴 이름을 포함해야합니다. 브라우저가 첫 번째 글꼴을 지원하지 않으면 다음 글꼴을 시도하는 식으로 진행됩니다.
다른 글꼴을 사용할 수없는 경우 브라우저에서 일반 글꼴로 비슷한 글꼴을 선택하도록 원하는 글꼴로 시작하고 일반 글꼴로 끝냅니다.
font-family의 이름이 두 단어 이상인 경우 “Times New Roman”과 같이 따옴표로 묶어야합니다.
하나 이상의 글꼴 군이 쉼표로 구분 된 목록으로 지정됩니다.
이 font-style속성은 주로 기울임 꼴 텍스트를 지정하는 데 주로 사용됩니다.
이 속성에는 세 가지 값이 있습니다.
font-size속성은 텍스트의 크기를 설정합니다.
텍스트의 크기를 관리 할 수 있다는 것은 웹 디자인에서 중요합니다. 그러나 단락을 표제처럼 보이게 하거나 머리글을 단락처럼
보이게 하려면 글꼴 크기 조정을 사용하면 안됩니다.
제목에는 <h1>-<h6>, 단락에는 <p>과 같은 적절한 HTML 태그를 사용하십시오.
font-size 값은 절대 크기 또는 상대 크기 일 수 있습니다.
절대크기 :
상대크기 :
글꼴 크기를 정하지 않으면 단락과 같은 일반 텍스트의 기본크기는 16px(16px = 1em)입니다.
픽셀로 텍스트 크기를 설정하면 텍스트 크기를 완벽하게 제어 할 수 있습니다.
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
사용자가 브라우저 메뉴에서 텍스트의 크기를 조정할 수 있도록 많은 개발자가 픽셀대신에 em을 사용합니다.
em크기 단위는 W3C에서 권장합니다.
1em은 현재 글꼴 크기와 같습니다. 브라우저의 기본 텍스트 크기는 16픽셀입니다. 따라서 1em의 기본 크기는 16px입니다.
크기는 다음 수식을 사용하여 픽셀에서 em까지 계산할 수 있습니다. pixels/16 = em
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
위의 예제에서 em의 텍스트 크기는 이전 예와 픽셀 단위로 동일합니다. 그러나 em 크기를 사용하면 모든 브라우저에서 텍스트 크기를 조정할 수 있습니다.
불행히도 IE의 이전 버전에는 여전히 문제가 있습니다. 텍스트는 커지면 커야하며 커지면 작게 만들어야합니다.
모든 브라우저에서 작동하는 솔루션은 <body> 요소의 기본 글꼴 크기를 백분율로 설정하는 것입니다.
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
이 font-weight속성은 글꼴의 굵기를 지정합니다.
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
텍스트 크기는 vw”뷰포트 너비”를 의미 하는 단위 로 설정할 수 있습니다 .
그렇게하면 텍스트 크기가 브라우저 창의 크기를 따릅니다.
<h1 style="font-size:10vw">Hello World</h1>
뷰포트는 브라우저 창 크기입니다. 1vw = 뷰포트 너비의 1 %. 뷰포트의 너비가 50cm이면 1vw는 0.5cm입니다.
이 font-variant속성은 텍스트를 작은 대문자 글꼴로 표시할지 여부를 지정합니다.
작은 대문자 글꼴에서는 모두 소문자가 대문자로 변환됩니다. 그러나 변환 된 대문자는 텍스트의 원래 대문자보다 작은 글꼴 크기로 나타납니다.
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}