- http://www.google.com/webfonts 에 접속하여 slackey, geo 으로 검색하여 사용할 2개의 오픈소스 폰트를 검색한다
- 검색된 결과에서 'Add to Collection' 를 누르고 오른쪽 위에서 'Download your Collection' 을 선택하여 다운로드한다
- 다운로드한 *.ttf 파일을 복사하여 *.woff 파일을 생성한다 iOS에서는 woff를 지원하지 않으므로 woff는 무시되고 ttf포맷을 사용한다.
- 프로젝트 내에 fonts 폴더를 생성하고 그 안에 *.woff, *.ttf 파일을 복사해 넣는다
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>HTML5, 카드 맞추기 게임</title>
<link rel="stylesheet" href="../styles/main.css" />
<link rel="stylesheet" href="../styles/fontfaces.css" />
<script src="../scripts/modernizr.js"></script>
<script src="../scripts/loader.js"></script>
</head>
<body>
<div id="game">
<div class="screen" id="splash-screen">
<h1 class="logo">Jewel <br/>Warrior</h1>
<span>Click to continue</span>
</div>
<div class="screen" id="main-menu"></div>
<div class="screen" id="game-screen"></div>
<div class="screen" id="high-scores"></div>
</div>
</body>
</html>
fonts/fontfaces.css
@font-face {
font-family: "Slackey";
font-weight: normal;
font-style: normal;
src: url("../fonts/slackey.woff") format("woff"),
url("../fonts/slackey.ttf") format("truetype");
}
@font-face {
font-family: "Geo";
font-weight: normal;
font-style: normal;
src: url("../fonts/geo.woff") format("woff"),
url("../fonts/geo.ttf") format("truetype");
}
body {
margin : 0;
}
#game {
position : absolute;
left : 0;
top : 0;
width : 320px;
height : 480px;
font-family: Geo;
background-color : rgb(200,200,100);
}
#game .screen {
position : absolute;
width : 100%;
height : 100%;
display : none;
z-index : 10;
}
#game .screen.active {
display : block;
}
#splash-screen {
text-align : center;
padding-top : 100px;
}#splash-screen .continue {
cursor : pointer;
font-size : 30px;
}.logo {
font-family : Slackey;
font-size : 60px;
line-height : 60px;
margin : 0;
text-align : center;
color : rgb(70,120,20);
text-shadow : 1px 1px 2px rgb(255,255,0),
-1px -1px 2px rgb(255,255,0),
5px 8px 8px rgb(0,0,0);
}.no-textshadow .logo {
filter : dropshadow(color=#000000,offX=3,offY=3);
}
Geo-Regular.ttf