[HTML/CSS] 글자 글꼴(폰트) 변경하기 (font-family)

글자 폰트 변경

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;

1. Verdana 글꼴을 찾는다.
2. Verdana 글꼴이 있으면 사용하고 없으면 Arial 글꼴을 찾는다.
3. Arial 글꼴이 있으면 사용하고 없으면 Helvetica 글꼴을 찾는다.
4. 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; }