웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
웹 폰트 적용 시키기 - 초보자용 -
2002.08.18 10:16
쿨럭.. 뒷북입니다. 정렬이 조금 더럽긴 하지만... 첫글이네요 ㅡㅡ
*일반 워드에서 적용시키기
예제
<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>
필요하신분 긁어가세요 ^^;
*일반 워드에서 적용시키기
예제
<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>
필요하신분 긁어가세요 ^^;
댓글 13
-
polo182
2002.08.19 03:30
-
ZipShin
2002.08.19 17:46
↑위의 소스를 복사하여 사용하여도 되구요^^ http://www.fontpia.co.kr/fonts/star16.mwf에 가서 다운받아도 되구..^ -
Bapi
2002.08.19 18:28
왜 클릭하지 말라는 건지.....;;; -
Nytoner
2002.10.26 22:14
Bapi // 정상적인 페이지가 아니니까 그렇게 했지 않았나 싶네요.. -
벡터맨
2002.09.03 23:53
별자리는 먹히는데 웹정이 안먹히네 ㅡ_ㅡ;; -
구름비
2002.10.16 23:57
잘않대요 우엉... -
김욱연
2002.12.19 22:36
웹폰트라는게
자기컴퓨터에 있는 폰트파일을 자기계정에 올려서 링크시켜서 사용하는건가여? -
구지훈
2003.01.11 22:46
걍 폰트 말구요^^ 웹용으로 확장자가 eot 나 등등이 있습니다 그걸 계쩡에 업로드 해서 사용하시는 거지요^^ -
김성은
2003.04.13 00:34
저기이요 걍폰트를요 edt 로 파일변환 하는 방법은 없나요?? -
찬트
2004.01.24 20:57
있습니다 weft라는 프로그램을 쓰셔야 해요 -
김성현
2004.04.16 17:21
저... 아주아주 초본데요.. textarea, input이런거 뜻이 뭐고 어떻게 쓰죠?? -
007
2004.10.03 17:04
웹폰트 설치때문에 고생을 너무 많이 하고 있습니다.
아래의 소스를 a.php로 저장하여 http://홈/a.php로접속하면
보통(굴림체?)의 글씨체로 나오는데
나모웹에디터(자체웹브라우저)로 보면 웹정폰트가 잘 적용됩니다.
무슨 문제일까요.
소스: <?
$_zb_url = "http://홈/zboard/";
$_zb_path = "/홈/zborad/";
include $_zb_path."outlogin.php";
?>
<STYLE TYPE="text/css">
@font-face {font-family:webjung; src:url(http://홈/web/jung9.mwf);}
body,td,a,div,p,pre,input,textarea,tr,table {font-family:webjung;font-size:9pt;color:#888888;line-height:160%;}
A:link {font-family:webjung;font-size:9pt;color:#888888;text-decoration:none;}
A:visited {font-family:webjung;font-size:9pt;color:#888888;text-decoration:none;}
A:active {font-family:webjung;font-size:9pt;color:#888888;text-decoration:none;}
A:hover {font-family:webjung;font-size:9pt;color:black;text-decoration:none;}
.ffd { border:1 solid #888888; background-color:#f3f4f3;}
</STYLE>
<body bgcolor="#D5D5D5" topmargin="0" marginheight="0" >
<font color="#402F2F" style="font-family:webjung;font-size:9pt;">Home</font>
<font color=888888 style=font-size:7pt size="2">|</font>
<font color="#402F2F" style="font-family:webjung;font-size:9pt;text-decoration:none;">공지 행사달력 행사달력 행사달력 행사달력</font>
<font color=888888 style=font-size:7pt size="2" >|</font>
</body> -
EmulBoy
2004.10.15 06:18
007 // font-family를 webjung이 아닌 정9로 바꿔보세요
저도 그문제로 고민했는데 그렇게 바꾸니 잘 되더군요 ^^
제목 | 글쓴이 | 날짜 |
---|---|---|
벅스 연동 되는 자세한 소스... [6] | 서비 | 2002.09.07 |
벅스 플레이어 소스입니다. [6] | ☺Lifestory™ | 2002.09.07 |
[HTML 초보자]- 테이블 태그를하자-4 [1] | ZipShin | 2002.09.07 |
[HTML 초보자]- 테이블 태그를하자-3 [2] | ZipShin | 2002.09.04 |
자바스크립트 없이 브라우저 버전체크 [5] | steelheart | 2002.09.03 |
[HTML 초보자]- 테이블 태그를하자-2 [5] | ZipShin | 2002.09.02 |
초보에게는 골치아픈 배경 위치 정하기... [6] | 유지호 | 2002.09.01 |
[HTML 초보자] 테이블 태그를하자-1 [5] | ZipShin | 2002.08.30 |
[HTML 초보자] marquee 태그 마스터 하기. [5] | ZipShin | 2002.08.27 |
스타일 시트 적용순서 [4] | 판타랏사 | 2002.08.24 |
[HTML 초보자] HTML <Hr>태그에 대해서.. [3] | ZipShin | 2002.08.23 |
[HTML 초보자] 강제개행 <br>태그 엔터효과. [8] | ZipShin | 2002.08.21 |
HTML/CSS/JSCRIPT Reference for IE5.0 and above [5] | 송인석 | 2002.08.20 |
HTML과 CSS 사전을 만들어 보았습니다. [7] | 01CODE.com | 2002.08.20 |
[초보-하드코딩] 소스정리 팁 몇가지... [23] | 안데르센 | 2002.08.19 |
[HTML 초보자] HTML 문단 P태그에 대해서 알아봐요..^^ [5] | ZipShin | 2002.08.18 |
웹 폰트 적용 시키기 - 초보자용 - [13] | 하지메 | 2002.08.18 |
[HTML]::HTML소스를 쉽게! 그대로 표시하게 하잣!! [3] | Smileru™ | 2002.08.17 |
[HTML 초보자] HTML HeadLine태그(H1,H2..) [6] | ZipShin | 2002.08.16 |
깔끔한 홈페이지를 만들고 싶다면 꼭 알아야 할 것(2) [9] | 키르(SP) | 2002.08.15 |
한번 사용해보구여 잘되야할텐데 ;; 초보라서