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

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

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

예제

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

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
19년 전 조회 2,176
19년 전 조회 4,313
19년 전 조회 2,730
19년 전 조회 2,208
19년 전 조회 2,306
19년 전 조회 2,902
19년 전 조회 2,011
19년 전 조회 3,258
19년 전 조회 2,819
19년 전 조회 2,320
19년 전 조회 1,862
19년 전 조회 2,299
19년 전 조회 2,068
19년 전 조회 1,950
19년 전 조회 2,512
19년 전 조회 2,369
19년 전 조회 3,945
19년 전 조회 3,785
19년 전 조회 2,298
19년 전 조회 3,350
19년 전 조회 2,009
19년 전 조회 2,445
19년 전 조회 2,330
19년 전 조회 2,391
19년 전 조회 2,223
19년 전 조회 2,864
19년 전 조회 2,866
19년 전 조회 3,213
19년 전 조회 3,089
19년 전 조회 2,756
19년 전 조회 2,978
19년 전 조회 3,223
19년 전 조회 2,927
19년 전 조회 2,659
19년 전 조회 2,987
19년 전 조회 4,558
19년 전 조회 2,477
19년 전 조회 2,489
19년 전 조회 3,539
19년 전 조회 3,207
19년 전 조회 2,857
19년 전 조회 2,096
19년 전 조회 1,832
19년 전 조회 2,925
19년 전 조회 1,782
19년 전 조회 2,356
19년 전 조회 3,994
19년 전 조회 3,787
19년 전 조회 3,505
19년 전 조회 3,459
19년 전 조회 1,609
19년 전 조회 1,984
19년 전 조회 1,904
19년 전 조회 2,575
19년 전 조회 4,661
19년 전 조회 2,808
19년 전 조회 1,971
19년 전 조회 1,985
19년 전 조회 1,873
19년 전 조회 2,611
19년 전 조회 8,226
19년 전 조회 2,774
19년 전 조회 2,840
19년 전 조회 3,097
19년 전 조회 2,240
19년 전 조회 2,259
19년 전 조회 2,220
19년 전 조회 2,113
19년 전 조회 2,296
19년 전 조회 2,565
19년 전 조회 3,138
19년 전 조회 2,374
19년 전 조회 1,952
19년 전 조회 2,884
19년 전 조회 5,049
19년 전 조회 3,546
19년 전 조회 3,491
19년 전 조회 3,023
19년 전 조회 2,443
19년 전 조회 1,527
19년 전 조회 3,181
19년 전 조회 2,050
19년 전 조회 5,411
19년 전 조회 2,484
19년 전 조회 3,481
19년 전 조회 2,906
19년 전 조회 1,802
19년 전 조회 3,920
19년 전 조회 2,449
19년 전 조회 2,343
19년 전 조회 3,059
19년 전 조회 3,347
19년 전 조회 2,538
19년 전 조회 2,308
19년 전 조회 2,374
19년 전 조회 2,051
19년 전 조회 3,125
19년 전 조회 2,054
19년 전 조회 2,087
19년 전 조회 1,749