호빵홈 소스자료실
현재위치 : hobbang.co.kr > 소스자료실
소스자료실은 홈페이지를 만들거나 꾸밀 수 있는 자바스크립트와 HTML 소스를 제공합니다.
또한 컴퓨터와 인터넷을 사용하면서 유용한 Tip도 제공하니 각 Category를 선택하세요.

Category

  (Homepage)님의 글입니다.
엔토이 블로그에서 웹폰트 적용하기 2003-09-30 01:53:46, 조회 : 2,967, 추천 : 13
- SiteLink #1 : http://download.entoi.com/download.nhn?userid=study&bbsid=244913&fn=nontoxic_ang_2.eot

소스를 가져가는 것은 자유이고 소스 설명을 이해하지 않고 그대로 복사해 가는 경우라면 설명의 출처를 http://hobbang.co.kr 라고 표기해주시구요.. 자신이 이해하고 이 설명을 참고해서 자신의 홈에 올리는 경우라면 출처 안밝혀도 상관 없습니다.. ^^



웹폰트 예제 파일인 앙증체 파일은 SiteLink #1의 파일을 클릭하면 다운받을 수 있습니다.. 이 파일은 예제 파일로 올려놓은 것으로 웹폰트를 배포하기 위한 용도는 아닙니다.. 웹폰트는 검색사이트에서 검색을 해보면 무료로 제공하는 웹폰트 사이트들을 찾을 수 있을 것입니다..

웹폰트 앙증체 적용한 것은 제 블로그에 와서 각 테마에 있는 최근 게시물들 목록을 보시면 볼 수 있습니다.. 위의 그림 클릭하면 제 블로그 창 나타납니다..

설명)
1. 웹폰트 파일 블로그에 올리기
사진 게시판에 웹폰트 파일과 사진 하나를 같이 파일 첨부로 올립니다..

그러면 화면에는 두 파일 중 사진만 나타납니다..

이 사진을 클릭하면 원본 사진이 새창으로 나옵니다..

새창에 나타난 사진에서 마우스 오른쪽 버튼 누르고 속성( = 등록 정보)에 있는 주소를 마우스로 드래그해서 선택한 후 마우스 오른쪽 버튼 누르고 [복사]를 합니다..
(사진게시판이 없다면 그냥 일반 게시판에서 파일 올리기로 올려도 됩니다.. 그때는 파일의 주소는 글 올린 후 첨부파일 이름에서 마우스 오른쪽 버튼 누르고 속성( = 등록 정보)을 누르면 주소 알 수 있습니다)

그 주소는 이런 형태일 것입니다..

http://download.entoi.com/download.nhn?userid=study&bbsid=숫자&fn=사진파일이름

숫자는 각 게시판마다 다른 숫자로 나타나구요.. 사진파일이름 대신 자신이 올린 웹폰트이름을 지정합니다.. 여기서 숫자는 고쳐주는 것이 아닙니다.. 사진파일이름을 웹폰트 파일 주소로 고치는 것입니다..

예를 들어 nontoxic_ang_2.eot 라는 웹폰트 파일이면

http://download.entoi.com/download.nhn?userid=study&bbsid=숫자&fn=nontoxic_ang_2.eot

이렇게 되겠죠..

파일 주소가 정확한지는 주소를 익스플로러의 주소표시줄에 붙여넣고 엔터 쳐보세요.. 파일 다운받기 창이 뜨면 파일 주소가 맞는 것이고 것이고 파일 다운받기 창이 안나타나면 파일 주소가 잘못된 것이니 다시 주소 찾아야겠죠..


2. 웹폰트 파일 주소로 스타일시트 사용하기

그러면 이제 이 웹폰트 파일 주소를 가지고 스타일시트로 적용을 하는 것을 설명하겠습니다..

아래의 소스의 두 번째 줄에 있는 src:url('') 여기의 ' ' 안에 위의 웹폰트 파일 주소를 복사합니다..


<style type="text/css">
@font-face {font-family:
앙증체; src:url('http://download.entoi.com/download.nhn?userid=study&bbsid=숫자&fn=nontoxic_ang_2.eot');}
A {font-family:
앙증체; font-size:9pt; text-decoration: none}
body, pre, font, table, tr, td, p, b, form, textarea, input, select, option, span, div, a {font-family:
앙증체; font-size:9pt; line-height:160%}
</style>

폰트의 이름은 앙증체라고 지정을 했는데 제가 첨부파일로 올린 웹폰트 이름이 앙증체라서 앙증체라고 쓴 것입니다..

폰트 이름이 "엽토체"라면 위의 소스에 있는
앙증체 라는 이름을 모두 엽토체로 바꿔주면 됩니다..

소스에 대해 간단히 설명하자면

@font-face {font-family:앙증체; src:url('http://download.entoi.com/download.nhn?userid=study&bbsid=숫자&fn=nontoxic_ang_2.eot');}
: 이 부분은 웹폰트를 지정하는 것입니다..

A {font-family:앙증체; font-size:9pt; text-decoration: none}
: 이 부분은 링크 태그에 웹폰트를 지정하고 폰트 사이즈는 9pt로 지정하고 링크 태그의 밑줄을 없애주는 것입니다.. 웹폰트는 대부분 9pt의 글자 끄기에서 글짜가 안깨져 보이고 이쁘게 나타납니다.. 이 앙증체 웹폰트 역시 9포인트가 최적 폰트라서 9포인트로 지정을 한 것입니다..

body, pre, font, table, tr, td, p, b, form, textarea, input, select, option, span, div, a {font-family:앙증체; font-size:9pt; line-height:160%}
: 이 부분은 링크 태그인 A 태그 이외의 다른 지정한 태그들에서도 글씨 폰트를 웹폰트로 지정하고 글씨 크기는 9pt로 지정을 하는 것입니다.. 그리고 웹폰트가 일반 굴림, 돋움 같은 글씨보다 작은 사이즈이기 때문에 줄 간격이 좁아질 수 있어서 줄 간격을 160%로 해서 글씨 크기의 160% 정도의 줄 간격을 지정한 것입니다..


이제 위의 소스를 복사해서 테마꾸미기의 테마인사말 꾸미기에 붙여넣을 것인데 초보용이 선택되어 있으면 안되구요..

숙련자용을 선택한 후에 맨 위에 위의 소스를 붙여넣기 하고 그 아래에 나타내고 싶은 내용을 태그나 글을 써 넣으면 됩니다..
(초보용은 270자까지 밖에 글씨를 못써요.. 그러니까 숙련자용에서 하라는 것입니다)

게시판 안의 내용이나 홈의 메인에서 웹폰트가 지정되게 해보려고 하는데 게시판에서는 지정한 스타일시트 내용이 모두 없어져 버리네요..

그리고 메인 화면 꾸미기는 펜레터 쓰기에서 꾸며야 하는데 그거 잘못하면 홈의 첫화면이 오류가 나기두 하니까 그건 설명 안합니다..

테마별 메뉴에서는 이제 자동으로 웹폰트가 적용되어 나타나는데 게시판 내용 보기로 들어가면 웹폰트 적용이 풀어져 버리네요..

하다가 안되는 건 호빵홈 질문/답변 게시판이나 엔토이 제 블로그의 [호빵태그] 테마에 있는 질문/답변 게시판에서 해주세요..


 



2020-09-25
00:23:39


  추천하기   목록보기

현재글을 이메일로 보내기

No 제 목 글쓴이 작성일 조회
613   클릭하면 아웃룩익스프레스 메일보내기 창 뜨도록 하는 태그     10-05 02:03 1754
612   [자바애플릿] 그림 위에 물이 흩어지는 소스     10-03 17:44 4734
611   지정한 여러 그림이 자동으로 변하는 소스     10-03 17:21 4983
610   깃털이 바람에 날리며 내려오는 소스     10-03 16:48 5618
609   그림태그인 <IMG> 태그에서 border=0을 꼭 써줘야 할까요?     10-03 16:43 1855
608   그림(사진) 보여주는 <IMG> 태그 초간단 설명     10-03 16:43 2894
607   플래시 뻐꾸기 시계     10-03 04:33 4716
606   플래시 벽시계     10-02 16:44 3575
605   창을 일정 시간 후 자동으로 닫기(종료하기)     10-02 04:00 3660
604   마퀴 태그를 이용한 반짝이는 별이 이리저리 나타났다 사라지는 소스     10-02 03:15 5047
603   특이한 실시간 플래시 시계     10-01 18:12 4741
602   엔토이의 자신의 블로그 스타등록을 어디서든 하기 태그 소스     09-30 02:11 1799
601   엔토이의 토이토이 메신저 실행시켜 주는 소스 (어느 홈에서든 사용 가능)     09-30 02:09 1418
600   어느 사이트에서나 엔토이의 자신의 블로그 창 띄워주는 소스     09-30 01:59 1514
  엔토이 블로그에서 웹폰트 적용하기     09-30 01:53 2967
   [이전 10개] [1].. 11 [12][13][14][15][16][17][18][19][20]..[51] [다음 10개]
 
Copyright 1999-2020 Zeroboard / skin by Praise Jesus
Copyright ⓒ 1998~ . Hobbang.co.kr. All rights reserved.