폰트의 종류
Serif
장식적 특징
Times New Roman, 궁서체...
Sans-Serif
깔끔한 디자인
Arial, 굴림체...
Monospace
모든 글자의 너비가 같음
(프로그래밍 폰트로 많이 사용)
Courier, Courier New...
Cursive
손글씨, 필기체
Comic Sans MS, Monotype Corsiva...
Fantasy
그 외 특이한 다른 폰트들
가독성이 낮은 경우가 많아, 머리말이나 짧은 글귀에 주로 쓰임
Impact, Haettenschweiler...
로컬 폰트의 사용
font-family: "Helvetica", Arial, sans-serif;
(폰트 이름에 띄어쓰기가 없을 경우, " 생략 가능)
1순위 : Helvetica
2순위 : Arial
사용자의 PC에 1순위 지정 폰트가 존재하지 않을 경우,
2순위 지정 폰트로 대체해서 렌더링 하지만,
그도 없을 경우 사용자의 PC에 있는 다른 sans-serif 폰트를 사용
구글 폰트의 사용
에서 사용할 폰트들을 선택한 후
<link href="https://fonts.googleapis.com/css?family=fontName1|fontName2|..." rel="stylesheet">
를 복사 해 <head></head>안에 삽입하고
CSS 코드를 아래와 같이 작성
font-family: "fontName1", serif;
font-family: "fontName2", cursive;
한글 폰트는 여기에서!
https://fonts.google.com/earlyaccess
폰트 파일의 사용
프로젝트 내에 fonts 폴더 생성 후
OTF(윈도우는 TTF) 폰트 파일을 붙여넣고
CSS 코드를 다음과 같이 작성해 줌
@font-face {
src: url("../fonts/fontName1.otf");
font-family: "font1";
}
(해당 폰트를 font1이라는 이름으로 사용하기로 약속)
p { font-family: "font1"; }
