|
이 글은 웹폰트가 있다는 가정하에 작정됩니다. 웹폰트이름은 [moss.eot], 홈페이지주소는 [www.moss.com] 이라고 생각합시다
1. 웹폰트를 웹서버(홈페이지 계정)에 올립니다. 디폴트 폴더에 올리면 파일은 www.moss.com/moss.eot 에 위치하겠군요. 티스토리의 경우에는 [스킨 - 직접올리기 - 파일 업로드]를 이용해서 올립니다. 티스토리는 images 폴더 안에 위치합니다.
2. 이제 웹폰트를 적용하는 소스를 해당 페이지의 <head>와 </head> 사이에 넣어줍니다. 티스토리의 경우는 skin.html 의 <head>와 </head> 사이에 넣을수 있지만 보시면 알다시피 css 소스이므로 style.css 에 넣어주는게 유지/보수를 위해서 좋습니다. 물론 계정을 가지고 홈페이지 만드시는 분들에게도 css파일에 넣어드리는 것을 적극추천해 드립니다.
|
html 파일에 넣을 경우
<head>
<style type="text/css">
<!--
@font-face {font-family: 폰트이름; src:url(http://www.moss.com/moss.eot);}
a:link {font-family: 폰트이름;font-size: 9pt;}
a:visited {font-family: 폰트이름;font-size: 9pt;}
a:hover {font-family: 폰트이름;font-size: 9pt;}
a:acvite {font-family: 폰트이름;font-size: 9pt;}
body,div,table,tr,td,p,span {font-family: 폰트이름;font-size: 9pt;}
-->
</style>
</head>
|
css 파일에 넣을 경우
|
<!--
@font-face {font-family: 폰트이름; src:url(http://www.moss.com/moss.eot);}
a:link {font-family: 폰트이름;font-size: 9pt;}
a:visited {font-family: 폰트이름;font-size: 9pt;}
a:hover {font-family: 폰트이름;font-size: 9pt;}
a:acvite {font-family: 폰트이름;font-size: 9pt;}
body,div,table,tr,td,p,span {font-family: 폰트이름;font-size: 9pt;}
--> |
@font-face {font-family: 폰트이름; src:url(http://www.moss.com/moss.eot);}
웹폰트를 불러오는 코드입니다.
font-family : 임의의 폰트이름을 넣어줍니다.
src:url() : 웹폰트파일이 위치하고 있는 곳입니다. 혹시나 도메인 서비스를 이용해서 주소를 짧게 사용하시는 분들은 짧아진 주소가 아니라 실제주소를 입력해 주셔야 합니다. 티스토리 사용자는 주소를 (./images/moss.eot)로 하실수 있습니다.
font-size : 웹폰트는 잘 보이는 사이즈가 정해져 있습니다. 확인하시고 수치를 넣어주세요.
2,3,4,5는 링크에 적용시키는 부분입니다.
마지막줄에 [body,div,table...]의 내용에 따라서 적용범위가 달라집니다. 그래서 우선은 가장 위쪽에 넣어주시고 적용범위를 설정하는 [body,div,table...]을 적절히 변경해 주시면 됩니다. |
댓글