글자 폰트 변경
font family와 generic family
- font family : 특정 글꼴 (arial, courier, 나눔고딕, 궁서, 굴림 등)
- generic family : 비슷한 모양을 가지는 글꼴의 집합 (serif, sans-serif, monospace 등)
이렇게 웹 문서에 포함된 텍스트들은 사용자의 글꼴(font family)을 이용해 웹 브라우저에 표현됩니다. 하지만 해당 글꼴이 설치되어 있지 않은 경우 브라우저의 기본 폰트값이 나타나 각각 다른 글꼴로 표시되는데 이를 generic family라고 합니다. 이 generic family는 기본 글꼴(web-safe font)로써 대부분의 시스템에 설치되어 있기 때문에 웬만하면 제대로 표시됩니다.
generic family 기본 글꼴 종류
- serif : 문자 삐침 있는 글꼴
- sans-serif : 문자 삐침 없는 글꼴
- monospace : 동일한 너비의 글꼴
- cursive : 손으로 쓴 것 같은 글꼴
- fantasy : 화려한 글꼴
폰트 변경 방법
HTML
<pW class="serif">사과(apple)</pW>
<p class="sans-serif">사과(apple)</p>
<p class="cursive">사과(apple)</p>
<p class="fantasy">사과(apple)</p>
<p class="monospace">사과(apple)</p>
CSS
.serif{ font-family : serif; }
.sans-serif{ font-family : sans-serif; }
.cursive{ font-family : cursive; }
.fantasy{ font-family : fantasy; }
.monospace{ font-family : monospace; }
여러 개의 글꼴 설정
font-family: Verdana, Arial, Helvetica, sans-serif;
- Verdana 글꼴을 찾는다.
- Verdana 글꼴이 있으면 사용하고 없으면 Arial 글꼴을 찾는다.
- Arial 글꼴이 있으면 사용하고 없으면 Helvetica 글꼴을 찾는다.
- Helvetica 글꼴이 있으면 사용하고 없으면 sans-serif 글꼴을 사용한다.
HTML
<p class="font1">사과(apple)</p>
<p class="font2">사과(apple)</p>
<p class="font3">사과(apple)</p>
CSS
.font1 { font-family: Times, Times New Roman, Georgia, serif;}
.font2 {font-family: Verdana, "돋움", dotum, sans-serif;}
.font3 {font-family: Lucida Console, Courier, monospace;}
유의사항
- 한글 폰트명은 따옴표로 묶어주는 것이 오류를 방지할 수 있습니다.
- 한글 폰트명과 함께 영문 폰트명도 함께 써주는 것이 좋습니다.
- 모든 글꼴이 없는 경우를 대비하여 글꼴의 마지막은 generic-family로 설정해 두는 것이 좋습니다.
- font-family 속성은 상속되기 때문에 태그 스타일에서 한번 정의하면 문서 전체에 적용되고 문서 안의 모든 자식 요소에 같은 글꼴이 사용됩니다. 그 글꼴이 아닌 다른 글꼴을 사용하고 싶다면 태그 스타일이나 클래스 스타일을 이용하여 다른 글꼴로 정의하셔야 합니다.
영어와 한글의 글꼴을 다르게 설정
HTML
<p class="font">사과(apple)</p>
CSS
.font{ font-family: Arial, "궁서", serif; }'HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] 텍스트 정렬 (text-align) (0) | 2024.04.20 |
|---|---|
| [HTML/CSS] font 속성 (0) | 2024.04.20 |
| [HTML/CSS] 작은 대문자로 표시하기 (font-variant) (0) | 2024.04.20 |
| [HTML/CSS] 대/소문자 변경하기 (text-transform) (0) | 2024.04.20 |
| [HTML/CSS] 텍스트 이탤릭체, 밑줄, 취소선 (0) | 2024.04.18 |