주로 이용되는 웹폰트 eot확장자를 가지고
티스토리 블로그에 웹폰트를 적용해보자!
먼저 웹폰트제공사이트에서
eot확장자를 가진 폰트를 다운받는다!
그리고나서
관리 -> 스킨 -> HTML/CSS 아랫쪽에 파일업로드클릭
-> 업로드 -> 폰트업로드를 해준다
관리 -> 스킨 -> HTML/CSS
skin창에서
<head>와</head>사이에
<style type="text/css">
<!--
@font-face {font-family: 파일이름; src:url(./images/파일이름.eot);}
a:link {font-family: 파일이름;font-size: 10pt;}
a:visited {font-family: 파일이름;font-size: 10pt;}
a:hover {font-family: 파일이름;font-size: 10pt;}
a:acvite {font-family: 파일이름;font-size: 10pt;}
body,div,table,tr,td,p,span {font-family: 파일이름;font-size: 10pt;}
-->
</style>
넣는다.
ex) 웹폰트사이트에서 soyabut.eot파일을 다운받았다. 적정한 글씨수치는'9'라고 한다.
웹폰트를 파일올리기로 업로드하고나서
skin창에
<style type="text/css">
<!--
@font-face {font-family: soyabut; src:url(./images/soyabut.eot);}
a:link {font-family: soyabut;font-size: 9pt;}
a:visited {font-family: soyabut;font-size: 9pt;}
a:hover {font-family: soyabut;font-size: 9pt;}
a:acvite {font-family: soyabut;font-size: 9pt;}
body,div,table,tr,td,p,span {font-family: soyabut;font-size: 9pt;}
-->
</style>
(요런 결과가 ;;)
그리고 다시
skin 창에 맨위에 마우스커서를 대놓고 컨트롤+F 눌러
검색해준다
하나밖에 없는 나타나게된다
그 바로 옆이나 위에보면 (바로위나 옆에 있음)
<div class="article" .......................(생략).......>
이라는 태그가 있을것이다
<div class="article" style="font:수치pt/150% 파일이름;">
만들어준다.
ex)
<div class="article" style="font:9pt/150% soyabut;">
</div>
요렇게 완성!
---------결론적으로
<style type="text/css">
<!--
@font-face {font-family: 파일이름; src:url(./images/파일이름.eot);}
a:link {font-family: 파일이름;font-size: 수치pt;}
a:visited {font-family: 파일이름;font-size: 수치pt;}
a:hover {font-family: 파일이름;font-size: 수치pt;}
a:acvite {font-family: 파일이름;font-size: 수치pt;}
body,div,table,tr,td,p,span {font-family: 파일이름;font-size: 수치pt;}
-->
</style>
요거랑
<div class="article" style="font:수치pt/150% 파일이름;">
요거를
넣어줘야 한다는거!
현재 로즈나미다가 사용중인 스킨은 더 수정해야 하는 웹폰트!
<현 사용중인 스킨바탕>
요 스킨에서는 위에 태그만 넣어준다고 설정다 되는게 아니였다;
보고자하는 글을 클릭하면 위에 제목이 겹쳐지는..
뭔가가 수치가 잘못되어있다고 생각해서
이것저것 건드려서 알아낸..
제목이 겹쳐질때 수정해야 할 부분!
관리자->스킨->HTML/CSS
에서
CSS창에서
/* 본문 타이틀 설정 */
.article_title { font:28px/32px "바탕"; letter-spacing: -0px; word-spacing: 4px; text-align: left; margin:10px 0px 0px 0px; }
원래 letter-spacing:-3px이였다;
letter-spacing: -0px 수정해주니까 겹쳐지는게 없어지고 똑바로 보인..^^v
이올린에 북마크하기
이올린에 추천하기'티스토리 Tip' 카테고리의 다른 글
| 티스토리 블로그에 웹폰트 적용하기! (11) | 2007/09/13 |
|---|---|
| 방명록에 비밀글쓰기 설정하기 (체크박스) (3) | 2007/09/13 |
