소스를 가져가는 것은 자유이고 소스 설명을 이해하지 않고 그대로 복사해 가는 경우라면 설명의 출처를 http://hobbang.co.kr 라고 표기해주시구요.. 자신이 이해하고 이 설명을 참고해서 자신의 홈에 올리는 경우라면 출처 안밝혀도 상관 없습니다.. ^^
웹폰트 예제 파일인 앙증체 파일은 SiteLink #1의 파일을 클릭하면 다운받을 수 있습니다.. 이 파일은 예제 파일로 올려놓은 것으로 웹폰트를 배포하기 위한 용도는 아닙니다.. 웹폰트는 검색사이트에서 검색을 해보면 무료로 제공하는 웹폰트 사이트들을 찾을 수 있을 것입니다..
웹폰트 앙증체 적용한 것은 제 블로그에 와서 각 테마에 있는 최근 게시물들 목록을 보시면 볼 수 있습니다.. 위의 그림 클릭하면 제 블로그 창 나타납니다..
설명) 1. 웹폰트 파일 블로그에 올리기 사진 게시판에 웹폰트 파일과 사진 하나를 같이 파일 첨부로 올립니다..
그러면 화면에는 두 파일 중 사진만 나타납니다..
이 사진을 클릭하면 원본 사진이 새창으로 나옵니다..
새창에 나타난 사진에서 마우스 오른쪽 버튼 누르고 속성( = 등록 정보)에 있는 주소를 마우스로 드래그해서 선택한 후 마우스 오른쪽 버튼 누르고 [복사]를 합니다.. (사진게시판이 없다면 그냥 일반 게시판에서 파일 올리기로 올려도 됩니다.. 그때는 파일의 주소는 글 올린 후 첨부파일 이름에서 마우스 오른쪽 버튼 누르고 속성( = 등록 정보)을 누르면 주소 알 수 있습니다)
파일 주소가 정확한지는 주소를 익스플로러의 주소표시줄에 붙여넣고 엔터 쳐보세요.. 파일 다운받기 창이 뜨면 파일 주소가 맞는 것이고 것이고 파일 다운받기 창이 안나타나면 파일 주소가 잘못된 것이니 다시 주소 찾아야겠죠..
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자까지 밖에 글씨를 못써요.. 그러니까 숙련자용에서 하라는 것입니다)
게시판 안의 내용이나 홈의 메인에서 웹폰트가 지정되게 해보려고 하는데 게시판에서는 지정한 스타일시트 내용이 모두 없어져 버리네요..
그리고 메인 화면 꾸미기는 펜레터 쓰기에서 꾸며야 하는데 그거 잘못하면 홈의 첫화면이 오류가 나기두 하니까 그건 설명 안합니다..
테마별 메뉴에서는 이제 자동으로 웹폰트가 적용되어 나타나는데 게시판 내용 보기로 들어가면 웹폰트 적용이 풀어져 버리네요..
하다가 안되는 건 호빵홈 질문/답변 게시판이나 엔토이 제 블로그의 [호빵태그] 테마에 있는 질문/답변 게시판에서 해주세요..
(Homepage)님의 글입니다.
