아래처럼 하면 웹폰트를 로딩할 수 있습니다.
이렇게 하면 사용할 준비는 다 된것입니다.
웹폰트 이므로 사용자에게 폰트가 없더라도 제대로 보입니다.
<link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet" type="text/css">
https://www.google.com/fonts
구글 폰트 주소 입니다.
다양한 폰트를 가져다 쓸 수 있습니다. 물론 영문 폰트에 한해서 말이죠.
한글 폰트도 있기는 하던데 좀 그렇습니다. ^^;
웹폰트 관련 예제 : font-family font-weight
※ 관련 예제에 웹폰트를 사용하였습니다.
게임 붐비치(BoomBeach) 폰트를 웹폰트와 CSS로 따라해보기
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
모바일 게임 붐비치의 일부 폰트를 따라해 보는 예제입니다.
붐비치 위키에서 본 내용을 소스분해 하여 따라해 보았습니다.
※ 붐비치는 클래시오브클랜으로 유명한 슈퍼셀의 게임입니다.
예제 1
따라 해 볼 것은
보기
제가 플레이중인 게임 화면캡쳐입니다.
위에 RIFLEMAN 이라는 글자를 CSS와 웹폰트로 따라해 보려고 합니다.
붐비치 위키에 보니 흉내낸 것이 있던데 그 소스를 그대로 사용하겠습니다.
※ 게임 언어를 영어로 설정했을 때 입니다. 한글로 한다면 폰트가 다릅니다.
※ RIFLEMAN 은 소총수 입니다. 소위 말하는 100 (일빵빵) ㅎㅎ
예제 2
준비물. 구글 웹폰트 로딩하기
보기
먼저 Bangers 라는 웹폰트를 로딩합니다.
설명
예제 3
웹폰트가 적용된 문자열
보기
RIFLEMAN
100
100
소스
<style type="text/css">
.css_test {
font-family : 'Bangers';
font-size : 70pt !important;
text-align : center;
}
</style>
<div class="css_test">
RIFLEMAN<br>
100
</div>
.css_test {
font-family : 'Bangers';
font-size : 70pt !important;
text-align : center;
}
</style>
<div class="css_test">
RIFLEMAN<br>
100
</div>
설명
- 그럴싸하게 잘 나옵니다. 폰트가 없더라도 말이죠.
- font-family : 'Bangers' 처럼 사용하면 됩니다.
- 사용은 쉬워요.
예제 4
테두리를 만들고 글자는 흰색으로
보기
RIFLEMAN
소스
<style type="text/css">
.css_test {
font-family : 'Bangers';
font-size : 70pt !important;
text-align : center;
color : white;
text-shadow:
1px 1px 1px black,
-1px -1px 1px black,
1px -1px 1px black,
-1px 1px 1px black,
0px -1px 1px black,
0px 1px 1px black,
-1px 0px 1px black,
1px 0px 1px black,
0 2px 1px black,
-1px 3px 1px black,
1px 3px 1px black;
}
</style>
<div class="css_test">RIFLEMAN</div>
.css_test {
font-family : 'Bangers';
font-size : 70pt !important;
text-align : center;
color : white;
text-shadow:
1px 1px 1px black,
-1px -1px 1px black,
1px -1px 1px black,
-1px 1px 1px black,
0px -1px 1px black,
0px 1px 1px black,
-1px 0px 1px black,
1px 0px 1px black,
0 2px 1px black,
-1px 3px 1px black,
1px 3px 1px black;
}
</style>
<div class="css_test">RIFLEMAN</div>
설명
- 붐비치 위키 CSS 소스를 참고하였습니다.
- text-shadow 를 여러개 중복하여 그림자 효과를 주고.
- 글자색을 흰색으로 설정하면 됩니다.
- 웹폰트와 그림자효과만을 이용해서 게임의 폰트 효과를 비슷하게 흉내낸 아이디어가 돋보입니다.
- CSS를 잘 활용하면 글자를 이미지 처리하지 않아도 됩니다. (한글은 좀 힘듭니다)
글자 그림자 예제 : text-shadow
예제 5
놀아 보기
보기
Boom Beach
붐 비치 아.. 한글은.
붐 비치 아.. 한글은.
설명
- 한글은 별로네요 -_-;
예제 6
한글 폰트를 바꿔서 마무리~
보기
CSS 공작소
소스
<style type="text/css">
.css_test {
font-weight : bold;
font-size : 70pt !important;
text-align : center;
color : white;
text-shadow:
1px 1px 1px black,
-1px -1px 1px black,
1px -1px 1px black,
-1px 1px 1px black,
0px -1px 1px black,
0px 1px 1px black,
-1px 0px 1px black,
1px 0px 1px black,
0 2px 1px black,
-1px 3px 1px black,
1px 3px 1px black;
}
</style>
<div class="css_test">CSS 공작소</div>
.css_test {
font-weight : bold;
font-size : 70pt !important;
text-align : center;
color : white;
text-shadow:
1px 1px 1px black,
-1px -1px 1px black,
1px -1px 1px black,
-1px 1px 1px black,
0px -1px 1px black,
0px 1px 1px black,
-1px 0px 1px black,
1px 0px 1px black,
0 2px 1px black,
-1px 3px 1px black,
1px 3px 1px black;
}
</style>
<div class="css_test">CSS 공작소</div>
설명
- 폰트는 맑은 고딕 입니다.
- 이건 괜찮은데요. ^^;
- 이건 괜찮은데요. ^^;