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

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

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

예제

<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,186
19년 전 조회 4,325
19년 전 조회 2,735
19년 전 조회 2,219
19년 전 조회 2,314
19년 전 조회 2,917
19년 전 조회 2,024
19년 전 조회 3,265
19년 전 조회 2,825
19년 전 조회 2,331
19년 전 조회 1,869
19년 전 조회 2,309
19년 전 조회 2,080
19년 전 조회 1,957
19년 전 조회 2,522
19년 전 조회 2,378
19년 전 조회 3,953
19년 전 조회 3,795
19년 전 조회 2,304
19년 전 조회 3,359
19년 전 조회 2,023
19년 전 조회 2,452
19년 전 조회 2,339
19년 전 조회 2,404
19년 전 조회 2,240
19년 전 조회 2,877
19년 전 조회 2,879
19년 전 조회 3,225
19년 전 조회 3,097
19년 전 조회 2,766
19년 전 조회 2,991
19년 전 조회 3,232
19년 전 조회 2,942
19년 전 조회 2,672
19년 전 조회 3,001
19년 전 조회 4,566
19년 전 조회 2,485
19년 전 조회 2,501
19년 전 조회 3,546
19년 전 조회 3,215
19년 전 조회 2,867
19년 전 조회 2,109
19년 전 조회 1,848
19년 전 조회 2,941
19년 전 조회 1,787
19년 전 조회 2,372
19년 전 조회 4,011
19년 전 조회 3,796
19년 전 조회 3,516
19년 전 조회 3,468
19년 전 조회 1,622
19년 전 조회 1,991
19년 전 조회 1,913
19년 전 조회 2,584
19년 전 조회 4,674
19년 전 조회 2,823
19년 전 조회 1,988
19년 전 조회 1,991
19년 전 조회 1,884
19년 전 조회 2,622
19년 전 조회 8,239
19년 전 조회 2,785
19년 전 조회 2,847
19년 전 조회 3,109
19년 전 조회 2,250
19년 전 조회 2,272
19년 전 조회 2,231
19년 전 조회 2,127
19년 전 조회 2,308
19년 전 조회 2,573
19년 전 조회 3,145
19년 전 조회 2,386
19년 전 조회 1,962
19년 전 조회 2,893
19년 전 조회 5,058
19년 전 조회 3,555
19년 전 조회 3,504
19년 전 조회 3,037
19년 전 조회 2,457
19년 전 조회 1,539
19년 전 조회 3,191
19년 전 조회 2,064
19년 전 조회 5,417
19년 전 조회 2,488
19년 전 조회 3,492
19년 전 조회 2,915
19년 전 조회 1,814
19년 전 조회 3,934
19년 전 조회 2,461
19년 전 조회 2,353
19년 전 조회 3,071
19년 전 조회 3,356
19년 전 조회 2,549
19년 전 조회 2,316
19년 전 조회 2,385
19년 전 조회 2,059
19년 전 조회 3,134
19년 전 조회 2,062
19년 전 조회 2,096
19년 전 조회 1,759