홈페이지를 예쁘게 하기 위해 모든 것을 이미지로?
웹 페이지 디자인에서 타이포그라피가 중요해 지면서, 다양한 폰트를 이용하고자 하는 요구도 커가고 있다. 그러나, 웹 브라우저마다 다른 폰트 방식과 한글폰트 파일의 크기로 인해 웹 페이지에서 원활한 한글폰트 이용이 어려웠다. 이로인해 과거에는 웹페이지 디자이너가 한글폰트가 아닌 그림을 이용해 웹페이지에서 타이포그라피를 구현하는 것이 일반적인 현상이 되었다.
웹 폰트
웹폰트를 사용하면 방문자가 홈페이지에 접속면 브라우저가 웹폰트를 다운로드 받고 이 웹폰트가 적용된 페이지가 화면에 출력 된다.
SCRIPT 9 웹폰트 다운로드
- script9.eot
- script9.ttf
- script9.woff
webfont.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="https://fonts.googleapis.com/css?family=League+Script"
rel="stylesheet">
<style type="text/css">
@font-face {
font-family: "SCRIPT9_WEB";
src: url("./fonts/script9.woff");
}
p.font1 {
font-family: 'League Script', cursive;
}
p.font2 {
font-family: 'SCRIPT9_WEB', cursive;
}
</style>
</head>
<body>
<p class="font1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
ut faucibus quam. Maecenas rhoncus quam in augue ultrices, in
ultricies massa ultricies. Ut efficitur vehicula nibh ac porttitor.
Vestibulum finibus sem sit amet auctor consectetur. Nulla eu lacus
quam. Vivamus non urna eget tellus ullamcorper venenatis sit amet vel
urna. Maecenas pulvinar sit amet velit suscipit luctus.</p>
<p class="font2">Nunc ac bibendum nunc, id sollicitudin leo. Nullam nec mi et
arcu luctus consequat. Nulla varius sem eget arcu maximus porta.
Mauris sollicitudin pharetra viverra. Vestibulum massa magna, mollis
sed felis consequat, tempor feugiat arcu. Duis justo dui, convallis
vel vehicula vitae, porttitor ut dolor. Vestibulum mi justo, accumsan
quis risus sed, auctor efficitur felis. Suspendisse dolor ante,
elementum bibendum lacinia sit amet, vestibulum in enim. </p>
</body>
</html>
실행결과
 |