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

· 2006-07-11 (화) 09:38:39 · 4384
쿨럭.. 뒷북입니다. 정렬이 조금 더럽긴 하지만... 첫글이네요 ㅡㅡ

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

예제

<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>
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
06-09-11 조회 3,223
06-09-10 조회 3,048
06-09-05 조회 5,385
06-09-02 조회 3,854
06-09-01 조회 3,213
06-09-01 조회 3,523
06-08-27 조회 3,316
06-08-27 조회 3,070
06-08-27 조회 2,822
06-08-27 조회 2,573
06-08-27 조회 2,483
06-08-25 조회 3,990
06-08-25 조회 2,481
06-08-23 조회 4,829
06-08-20 조회 3,565
06-08-19 조회 3,405
06-08-18 조회 2,827
06-08-18 조회 2,942
06-08-11 조회 4,101
06-08-10 조회 2,782
06-08-06 조회 4,461
06-08-05 조회 3,234
06-08-05 조회 2,730
06-07-31 조회 3,379
06-07-30 조회 2,922
06-07-29 조회 3,335
06-07-26 조회 2,854
06-07-26 조회 3,246
06-07-25 조회 3,728
06-07-20 조회 3,397
06-07-20 조회 3,655
06-07-19 조회 3,812
06-07-19 조회 2,877
06-07-19 조회 4,725
06-07-14 조회 3,670
06-07-13 조회 3,971
06-07-11 조회 3,034
06-07-11 조회 2,768
06-07-11 조회 4,707
06-07-11 조회 2,545
06-07-11 조회 2,914
06-06-24 조회 3,964
06-06-24 조회 3,418
06-06-13 조회 4,366
06-06-13 조회 3,269
06-06-11 조회 3,154
06-06-08 조회 3,222
06-06-08 조회 3,376
06-06-08 조회 3,801
06-06-07 조회 3,672
06-06-05 조회 3,889
06-06-02 조회 3,450
06-06-01 조회 4,106
06-05-28 조회 3,767
06-05-26 조회 4,334
06-05-22 조회 3,169
06-05-15 조회 3,625
06-05-14 조회 6,986
06-05-11 조회 3,537
06-05-11 조회 4,131
06-05-11 조회 3,599
06-05-11 조회 2,488
06-05-11 조회 2,761
06-05-11 조회 2,414
06-05-10 조회 3,886
06-05-09 조회 4,767
06-05-07 조회 2,568
06-05-07 조회 2,808
06-05-07 조회 2,512
06-05-06 조회 3,696
06-04-28 조회 3,362
06-04-25 조회 3,728
06-04-25 조회 3,459
06-04-22 조회 3,477
06-04-18 조회 4,487
06-04-14 조회 5,128
06-03-27 조회 3,798
06-03-06 조회 3,798
06-03-05 조회 5,105
06-02-24 조회 3,752
06-02-23 조회 4,166
06-02-22 조회 3,989
06-02-22 조회 3,299
06-01-15 조회 3,626
06-01-10 조회 3,589
06-01-05 조회 4,780
05-12-30 조회 5,493
05-12-23 조회 3,629
05-12-01 조회 3,359
05-09-29 조회 4,476
05-09-27 조회 4,867
05-09-22 조회 6,085
05-09-15 조회 3,010
05-09-08 조회 3,907
05-09-05 조회 5,615
05-09-01 조회 4,699
05-09-01 조회 5,816
05-08-21 조회 3,254
05-08-18 조회 3,596
05-08-17 조회 3,713