CSS 글꼴
웹사이트에 적합한 글꼴을 선택하는 것이 중요합니다!
글꼴 선택이 중요합니다
올바른 글꼴을 선택하는 것은 독자가 웹사이트를 경험하는 방식에 큰 영향을 미칩니다.
올바른 글꼴은 브랜드의 강력한 아이덴티티를 만들 수 있습니다.
읽기 쉬운 글꼴을 사용하는 것이 중요합니다. 글꼴은 텍스트에 가치를 더합니다. 글꼴의 올바른 색상과 텍스트 크기를 선택하는 것도 중요합니다.
일반 글꼴 모음
CSS에는 5가지 일반 글꼴 패밀리가 있습니다.
- Serif 글꼴은 각 문자의 가장자리에 작은 획이 있습니다. 그들은 형식과 우아함의 감각을 만듭니다.
- Sans-serif 글꼴에는 깨끗한 선이 있습니다(작은 획이 첨부되지 않음). 그들은 현대적이고 최소한의 모습을 만듭니다.
- 고정 폭 글꼴 - 여기에서 모든 문자는 동일한 고정 너비를 갖습니다. 그들은 기계적인 모양을 만듭니다.
- 필기체 글꼴은 사람의 손글씨를 모방합니다.
- 판타지 글꼴은 장식적/장난감이 있는 글꼴입니다.
다른 모든 글꼴 이름은 일반 글꼴 패밀리 중 하나에 속합니다.
세리프체와 산세리프체의 차이점 - 2020 - 다른 사람
참고: 컴퓨터 화면에서 sans-serif 글꼴은 serif 글꼴보다 읽기 쉬운 것으로 간주됩니다.
일부 글꼴 예
| Generic Font Family | Examples of Font Names |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
CSS font-family 속성
CSS에서는 font-family속성을 사용하여 텍스트의 글꼴을 지정합니다.
참고 : 글꼴 이름이 두 단어 이상인 경우 "Times New Roman"과 같이 따옴표로 묶어야 합니다.
팁: 속성 은 font-family브라우저/운영 체제 간의 최대 호환성을 보장하기 위해 "대체" 시스템으로 여러 글꼴 이름을 보유해야 합니다. 원하는 글꼴로 시작하고 일반 패밀리로 끝납니다(다른 글꼴을 사용할 수 없는 경우 브라우저가 일반 패밀리에서 유사한 글꼴을 선택하도록 하기 위해). 글꼴 이름은 쉼표로 구분해야 합니다. 다음 장 에서 대체 글꼴에 대해 자세히 알아보십시오 .
예시
세 단락에 대해 몇 가지 다른 글꼴을 지정합니다.
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}