웹 폰트 적용 시키기 - 초보자용 -

· 19년 전 · 3397
쿨럭.. 뒷북입니다. 정렬이 조금 더럽긴 하지만... 첫글이네요 ㅡㅡ

*일반 워드에서 적용시키기

예제

<STYLE>
@font-face {font-family:내폰트;src:url(폰트 올린 주소);}
body,td,tr,table{font-size:숫자pt; font-family:내폰트;color:black;line-height:150%;}
A:link {font-family:내폰트;font-size:숫자pt;color:black;text-decoration:none;}
A:visited {font-family:내폰트;font-size:숫자pt;color:black;text-decoration:none;}
A:active {font-family:내폰트;font-size:숫자pt;color:black;text-decoration:none;}
A:hover {font-family:내폰트;font-size:숫자pt;color:gray;text-decoration:none;}
</style>

메모장 하나 엽니다. 위 글을 Ctrl+C 복사해서 Ctrl+V 붙여넣기 합니다.
위에 내폰트에는 폰트 이름 적으시구요, 폰트 올린 주소는 Ftp등으로 웹폰트 올린 주소를 말하는 겁니다. 숫자에는 글이 나타날 크기를 말하는 거고...

< Ex :) http://올린계정.뒤에붙는거/어쩌구폴더/내폰트.eot 또는 swf ><--클릭하지 마세요.

그담 Ctrl+C 복사를 합니다.

적용시킬 문서를 Html 볼 수 있는 프로그램으로 엽니다. (울트라 에디터나, 나모나, 드림위버나, 메모장 등)

아무 곳이나 빈 칸에 집어넣습니다. (제일 아래가 가장 적당)

나모를 이용하시는 분이면 자동으로 수정이 됩니다. (저도 씁니다)

그냥 그 상태로 미리보기를 하시면 안 보이실 겁니다. 웹 계정에 올리시면 99.999% 보일 겁니다.

0.001%의 경우: 폰트 크기를 잘못 지정해서 글씨가 깨져보이는 경우 (예를 들어, 정9체 폰트 사이즈를 10으로 했을 경우.), 폰트 주소를 잘못 적었을 경우.

* 제로보드에서 스타일 시트 필요 없이 적용시키기.

아시는 분 다 아는 뒷북이라고 분명히 말씀을 드렸습니다. 비위에 거슬리시는 분은 사죄의 말씀을... -초 초보자용- 저도 초보이기 때문에 아주 허접합니다.

제로보드 설치된 폴더에 관리자 모드로 들어갑니다.

Ex :) http://주소.컴등/제로보드폴더/admin.php <--클릭하지 마세요.
방법 1: 그룹 전체에 적용 시키기

그룹 설정으로 들어갑니다.

예제

<STYLE>
@font-face {font-family:내폰트;src:url(폰트 올린 주소);}
body,td,tr,table{font-size:숫자pt; font-family:내폰트;color:black;line-height:150%;}
A:link {font-family:내폰트;font-size:숫자pt;color:black;text-decoration:none;}
A:visited {font-family:내폰트;font-size:숫자pt;color:black;text-decoration:none;}
A:active {font-family:내폰트;font-size:숫자pt;color:black;text-decoration:none;}
A:hover {font-family:내폰트;font-size:숫자pt;color:gray;text-decoration:none;}
</style>

이것 복사해서 수정하셔서 (위에 방법이 나와 있습니다.) [게시판 상단에 불러올 내용]에 갖다 붙여넣기 (Ctrl+C) -> (Ctrl+V) 합니다.

자아~ 이제 모든 생성된 게시판에 위의 폰트가 적용이 되었습니다.

방법2. 게시판 하나하나에 적용 시키기.

번거롭겠지만, 방법 1을 사용하고 또 일부 게시판에 방법 2를 사용하는 방법이 있습니다.

즉, 게시판 내에서의 기본 글꼴을 정9체로 하고, 일부 공지 등에서는 쉐도우체등을 이용하시는 방법입니다.
(안 어울립니다. 글꼴은 알아서 잘 선택하시길...)

방법은 같습니다. 게시판 관리에 들어가서 적용 시킬 게시판의 기본설정 변경란으로 들어갑니다.

예제

<STYLE>
@font-face {font-family:내폰트;src:url(폰트 올린 주소);}
body,td,tr,table{font-size:숫자pt; font-family:내폰트;color:black;line-height:150%;}
A:link {font-family:내폰트;font-size:숫자pt;color:black;text-decoration:none;}
A:visited {font-family:내폰트;font-size:숫자pt;color:black;text-decoration:none;}
A:active {font-family:내폰트;font-size:숫자pt;color:black;text-decoration:none;}
A:hover {font-family:내폰트;font-size:숫자pt;color:gray;text-decoration:none;}
</style>

위에 것을 적절히 수정하여 [게시판 상단에 불러올 내용]에 붙여넣기 (Ctrl+V) 하시면 됩니다.

세세한 부분은 컨트롤 하지 못합니다. 롤오버에서 글씨체 변화시키기 등등은 조금 더 삽입해주면 되겠지만

허접 팁은 여기서 마칩니다. -_- ~ _ _ ~ -_-

위에 태그 말고 다른 태그도 많습니다. 위의 태그는 제 홈에서 쓰는 텍스트 롤오버를 그대로 적용시킨 것입니다 ^^; (기본:검정, 마우스 올렸을때: 회색)

아래 태그는 폰트피아 (http://www.fontpia.co.kr) 에서 무료로 배포하는 별자리16 글꼴의 적용 예제입니다.

예제 1

<!--
@font-face {font-family:별자리16;src:url(http://www.fontpia.co.kr/fonts/star16.mwf);}
@font-face {font-family:jung10;src:url(http://www.fontpia.co.kr/fonts/jung10.mwf);}
body,td,input,textarea,a,a:hover {font-size:13px;font-family:jung10;line-height:160%;}

a {color:333333;text-decoration:none;}
a:hover {color:6F7278;text-decoration:none;}
.title {font-family:piaTitle;color:593A77;font-size:16px;}
.orange {color:EF7F1B;text-decoration:none;}
.orange:hover {color:F8A007;text-decoration;}
-->
</style>

예제 2

<STYLE>
@font-face {font-family:별자리16;src:url(http://www.fontpia.co.kr/fonts/star16.mwf);}
body,td,tr,table{font-size:숫자pt; font-family:별자리16;color:black;line-height:160%;}
A:link {font-family:별자리16;font-size:16pt;color:black;text-decoration:none;}
A:visited {font-family:별자리16;font-size:16pt;color:black;text-decoration:none;}
A:active {font-family:별자리16;font-size:16pt;color:black;text-decoration:none;}
A:hover {font-family:별자리16;font-size:16pt;color:gray;text-decoration:none;}
</style>

필요하신분 긁어가세요 ^^;



http://www.nzeo.com/bbs/zboard.php?id=p_html&page=1&sn1=&divpage=1&category=2&sn=off&ss=on&sc=off&select_arrange=vote&desc=desc&no=444<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:54:41 CSS에서 이동 됨]</div>
|
댓글을 작성하시려면 로그인이 필요합니다. 로그인

프로그램

+
제목 글쓴이 날짜 조회
19년 전 조회 2,118
19년 전 조회 4,244
19년 전 조회 2,665
19년 전 조회 2,154
19년 전 조회 2,252
19년 전 조회 2,834
19년 전 조회 1,950
19년 전 조회 3,191
19년 전 조회 2,748
19년 전 조회 2,258
19년 전 조회 1,802
19년 전 조회 2,228
19년 전 조회 1,998
19년 전 조회 1,894
19년 전 조회 2,455
19년 전 조회 2,311
19년 전 조회 3,877
19년 전 조회 3,732
19년 전 조회 2,232
19년 전 조회 3,275
19년 전 조회 1,948
19년 전 조회 2,374
19년 전 조회 2,266
19년 전 조회 2,335
19년 전 조회 2,169
19년 전 조회 2,803
19년 전 조회 2,811
19년 전 조회 3,160
19년 전 조회 3,030
19년 전 조회 2,699
19년 전 조회 2,917
19년 전 조회 3,167
19년 전 조회 2,868
19년 전 조회 2,605
19년 전 조회 2,914
19년 전 조회 4,493
19년 전 조회 2,419
19년 전 조회 2,438
19년 전 조회 3,475
19년 전 조회 3,145
19년 전 조회 2,798
19년 전 조회 2,041
19년 전 조회 1,765
19년 전 조회 2,871
19년 전 조회 1,713
19년 전 조회 2,305
19년 전 조회 3,945
19년 전 조회 3,724
19년 전 조회 3,444
19년 전 조회 3,398
19년 전 조회 1,557
19년 전 조회 1,926
19년 전 조회 1,849
19년 전 조회 2,515
19년 전 조회 4,611
19년 전 조회 2,748
19년 전 조회 1,910
19년 전 조회 1,921
19년 전 조회 1,808
19년 전 조회 2,547
19년 전 조회 8,168
19년 전 조회 2,718
19년 전 조회 2,781
19년 전 조회 3,035
19년 전 조회 2,189
19년 전 조회 2,203
19년 전 조회 2,168
19년 전 조회 2,063
19년 전 조회 2,252
19년 전 조회 2,509
19년 전 조회 3,073
19년 전 조회 2,325
19년 전 조회 1,901
19년 전 조회 2,825
19년 전 조회 4,990
19년 전 조회 3,490
19년 전 조회 3,447
19년 전 조회 2,969
19년 전 조회 2,390
19년 전 조회 1,480
19년 전 조회 3,129
19년 전 조회 2,002
19년 전 조회 5,364
19년 전 조회 2,420
19년 전 조회 3,423
19년 전 조회 2,847
19년 전 조회 1,756
19년 전 조회 3,872
19년 전 조회 2,410
19년 전 조회 2,292
19년 전 조회 3,014
19년 전 조회 3,289
19년 전 조회 2,489
19년 전 조회 2,254
19년 전 조회 2,321
19년 전 조회 1,990
19년 전 조회 3,083
19년 전 조회 2,007
19년 전 조회 2,039
19년 전 조회 1,693
🐛 버그신고