웹 폰트
- 사용자 시스템에 없는 글꼴도 사용 가능하게 함
- 사용자 시스템에 없는 글꼴이더라도 웹 문서를 만들 때 사용한 글꼴을 내려받은 후 표시함
- 기존에 가지고 있던 웹 폰트를 사용했다면 웹 문서를 서버에 올릴 때 웹 폰트 파일도 함께 업로드 해야 함
- 웹 폰트를 사용한 사이트에 사용자가 접속하면 웹 문서를 내려받으면서 웹 폰트도 사용자 시스템으로 다운됨
- 컴퓨터에서 사용하는 글꼴은 트루타입으로 파일 확장자는 *.ttf
트루타입 글꼴은 파일 크기가 커서 웹에서 사용하기에 적절하지 않음 - 웹에 적절한 글꼴에는 EOT(embedded open type), WOFF(web open font format), WOFF2 가 있음
- 기본형 :
└ font-family 속성을 사용하여 글꼴 이름을 만듦@font-face { font-family: <글꼴 이름>; src: <글꼴 파일>[<글꼴 파일>, <글꼴 파일>, ...]; }
src 속성에서는 사용할 글꼴 파일의 경로를 지정함
글꼴 파일의 경로를 지정하기 전에 local() 문을 사용하여 사용자 시스템에 해당 글꼴이 있는지 먼저 확인해야 함
사용자 시스템에 글꼴이 있다면 그 글꼴을 사용하지만, 만약 없다면 WOFF 포맷으로 된 글꼴을 내려받아야 함
TTF 포맷은 다른 파일 형식보다 용량이 커서 WOFF 포맷을 먼저 선언하고 TTF 포맷은 그 후에 선언함
-(예시) 1 : 직접 웹 폰트 파일을 준비해서 업로드한 후 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Example</title>
<style>
@font-face {
font-family: 'Ostrich';
src: local('Ostrich Sans'),
url('fonts/ostrich-sans-bold.woff') format('woff'),
url('fonts/ostrich-sans-bold.ttf') format('truetype'),
url('fonts/ostrich-sans-bold.svg') format('svg');
}
.wfont {
font-family: 'Ostrich', snas-serif;
}
p {
font-size: 30px;
}
</style>
</head>
<body>
<h1>예제</h1>
<p>ABCDEFG</p>
<p class="wfont">ABCDEFG</p>
</body>
</html>-(결과) 1 :
-(예시) 2 : 구글 폰트 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Example</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gugi&display=swap');
h1 {
font-size: 60px;
font-weight: bold;
font-family: 'Gugi', cursive;
}
</style>
</head>
<body>
<h1>예시 1 예시 2</h1>
</body>
</html>-(결과) :
