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

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

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

예제

<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,150
19년 전 조회 4,286
19년 전 조회 2,701
19년 전 조회 2,179
19년 전 조회 2,280
19년 전 조회 2,876
19년 전 조회 1,984
19년 전 조회 3,237
19년 전 조회 2,786
19년 전 조회 2,296
19년 전 조회 1,834
19년 전 조회 2,274
19년 전 조회 2,034
19년 전 조회 1,925
19년 전 조회 2,483
19년 전 조회 2,345
19년 전 조회 3,922
19년 전 조회 3,760
19년 전 조회 2,263
19년 전 조회 3,325
19년 전 조회 1,980
19년 전 조회 2,418
19년 전 조회 2,305
19년 전 조회 2,367
19년 전 조회 2,201
19년 전 조회 2,838
19년 전 조회 2,846
19년 전 조회 3,190
19년 전 조회 3,063
19년 전 조회 2,731
19년 전 조회 2,954
19년 전 조회 3,193
19년 전 조회 2,911
19년 전 조회 2,636
19년 전 조회 2,953
19년 전 조회 4,540
19년 전 조회 2,449
19년 전 조회 2,465
19년 전 조회 3,511
19년 전 조회 3,186
19년 전 조회 2,831
19년 전 조회 2,077
19년 전 조회 1,809
19년 전 조회 2,895
19년 전 조회 1,761
19년 전 조회 2,337
19년 전 조회 3,974
19년 전 조회 3,760
19년 전 조회 3,475
19년 전 조회 3,433
19년 전 조회 1,591
19년 전 조회 1,956
19년 전 조회 1,880
19년 전 조회 2,552
19년 전 조회 4,639
19년 전 조회 2,782
19년 전 조회 1,942
19년 전 조회 1,962
19년 전 조회 1,847
19년 전 조회 2,584
19년 전 조회 8,197
19년 전 조회 2,749
19년 전 조회 2,813
19년 전 조회 3,064
19년 전 조회 2,219
19년 전 조회 2,232
19년 전 조회 2,195
19년 전 조회 2,091
19년 전 조회 2,281
19년 전 조회 2,541
19년 전 조회 3,108
19년 전 조회 2,347
19년 전 조회 1,927
19년 전 조회 2,858
19년 전 조회 5,024
19년 전 조회 3,520
19년 전 조회 3,473
19년 전 조회 2,996
19년 전 조회 2,421
19년 전 조회 1,508
19년 전 조회 3,161
19년 전 조회 2,027
19년 전 조회 5,390
19년 전 조회 2,455
19년 전 조회 3,448
19년 전 조회 2,885
19년 전 조회 1,782
19년 전 조회 3,899
19년 전 조회 2,432
19년 전 조회 2,314
19년 전 조회 3,036
19년 전 조회 3,321
19년 전 조회 2,518
19년 전 조회 2,288
19년 전 조회 2,344
19년 전 조회 2,022
19년 전 조회 3,105
19년 전 조회 2,029
19년 전 조회 2,061
19년 전 조회 1,721