Skip to content

기타팁
2012.03.22 17:20

웹폰트

?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부 수정 삭제
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부 수정 삭제

웹폰트는 전에 한번 소개한적이 있다.


그래도 간단하게 좀더 설명을 드리고 가면


우리가 웹페이지를 만들며 기본폰트 말고 자신에 컴에 있는 다양한 폰트를 사용하고픈 생각이 들게 된다.


이때 웹폰트를 사용하게 된다.


자신에 컴에 있는 폰트는 ttf 형식으로 익스에선 인식을 못한다.


익스에선 eot형식에 폰트파일만 인식한다.


근데 익스를 제외한 다른 브라우져에선 eto는 인식을 못한다 그래서


하나의 폰트를 사용하기 우해서는 ttf  형식과 eot형식 두개를 만들어 올려야


모든 브라우져에서 폰트를 적용한 모습이 나타나게 된다.


첨부한 파일은 eotfast 란 프로그램으로 ttf 파일을 손쉽게 eot 파일로 변환해준다.


사용법은 http://eara.tistory.com/150


변환한 두개의 파일을 업로드 한뒤


<style type="text/css">

<!--

@font-face {font-family:han; src:url(http://gsm.dothome.co.kr/font//han.woff);} 

@font-face {font-family:han; src:url(http://gsm.dothome.co.kr/font//han.eot);} 

-->

</style>


<span style="font-family:han;font-size:15px;font-weight:lighter;line-height:36px;color: rgb(255, 0, 0);">


가나다


</span>


이런식으로 적용하면 된다.


han은 걍 폰트 이름으로 임의적인 것이다.


url은 업로드된 폰트의 주소

근데 han이란 이름으로 두개인 이유는 브라우져에 따라 허용되는 것을 출력하라고 두개


아래 span에선 size 폰트 크기 line-height는 줄간격이라 생각하면 됨


첨부한 파일이 두개인데 하나는 woff만드는 프로그램이고 다른 하나는 위에서 말한데로 eot만드는 프로그램이다.


사용법은 둘다 같다.



적용된 모습 이렇게 식으로 폰트가 적용된다. 그리고 이렇게 사용한 다음은 브라우져별로 확인해 볼 필요가 있다.

참고로 폰트파일에 용량이 꽤 된다 . 지금 확인해 보니 10메가 이상되는 것도 있다. 트래픽이 부족하신분들은 사용자제요

익스하고 크롬에서만 적용되넹


  1. 데모사이트 관련

  2. XE 버젼 업에 따른 관리자 페이지 변경

  3. 원격 프로그램 팀뷰어

  4. 초보자들을 위한 홈피만들기에 개념?

  5. xe 설치과정입니다.

  6. xe로 홈피 만들기 실전 1 - 개론

  7. 홈페이지 형식의 자기소개서?

  8. 지금까지 사용해본 레이아웃

  9. xe 설치 두번째

  10. 풀다운 메뉴

  11. 제로보드 4 설치과정

  12. 언젠가 만들었던 연습용 홈피

  13. 사진배경 홈피

  14. 웹폰트

  15. xe.. 제로보드 4처럼 사용하기..

  16. 테이블 레이아웃 두번째

  17. 배경 x,y축으로 반복 또는 한번만 출력

  18. 테이블을 이용한 xe레이아웃 도전

  19. xe 홈피만들기 연습

  20. 제로보드4 노프레임 홈피파일

  21. 포토샵 액션을 이용한 초간단 사진효과

  22. audio html5 태그

  23. embed 스타일

Board Pagination Prev 1 2 3 4 5 6 Next
/ 6

Recent Articles

Gloomy의 비오는 일요일 홈피는 모든 저작권을 포기합니다.

Powered by Xpress Engine / Designed by Sketchbook

sketchbook5, 스케치북5

sketchbook5, 스케치북5

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소