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. 데모사이트 관련

    Date2013.05.07 Categoryxe레이아웃 Bygsm Views8704
    read more
  2. XE 버젼 업에 따른 관리자 페이지 변경

    Date2013.04.28 CategoryXE 홈피 Bygsm Views9354
    read more
  3. 원격 프로그램 팀뷰어

    Date2012.12.13 Category기타팁 Bygsm Views9378
    read more
  4. 초보자들을 위한 홈피만들기에 개념?

    Date2012.10.16 Category기타팁 Bygsm Views9967
    read more
  5. xe 설치과정입니다.

    Date2012.10.05 CategoryXE 홈피 Bygsm Views10107
    read more
  6. xe로 홈피 만들기 실전 1 - 개론

    Date2012.11.12 CategoryXE 홈피 Bygsm Views2528
    Read More
  7. 홈페이지 형식의 자기소개서?

    Date2012.10.31 Category연습용 Bygsm Views1762
    Read More
  8. 지금까지 사용해본 레이아웃

    Date2012.10.31 CategoryXE 홈피 Bygsm Views2337
    Read More
  9. xe 설치 두번째

    Date2012.10.25 CategoryXE 홈피 Bygsm Views2649
    Read More
  10. 풀다운 메뉴

    Date2012.10.05 Category기타팁 Bygsm Views1580
    Read More
  11. 제로보드 4 설치과정

    Date2012.07.15 Category제로보드4 Bygsm Views1698
    Read More
  12. 언젠가 만들었던 연습용 홈피

    Date2012.06.19 Category연습용 Bygsm Views1785
    Read More
  13. 사진배경 홈피

    Date2012.05.03 Category연습용 Bygsm Views1949
    Read More
  14. 웹폰트

    Date2012.03.22 Category기타팁 Bygsm Views2803
    Read More
  15. xe.. 제로보드 4처럼 사용하기..

    Date2012.03.20 CategoryXE 홈피 Bygsm Views5692
    Read More
  16. 테이블 레이아웃 두번째

    Date2012.03.20 Category연습용 Bygsm Views1756
    Read More
  17. 배경 x,y축으로 반복 또는 한번만 출력

    Date2012.03.19 Category기타팁 Bygsm Views1570
    Read More
  18. 테이블을 이용한 xe레이아웃 도전

    Date2012.03.11 Category연습용 Bygsm Views1820
    Read More
  19. xe 홈피만들기 연습

    Date2012.03.07 Category연습용 Bygsm Views2000
    Read More
  20. 제로보드4 노프레임 홈피파일

    Date2012.02.20 Category연습용 Bygsm Views2250
    Read More
  21. 포토샵 액션을 이용한 초간단 사진효과

    Date2012.02.15 Category기타팁 Bygsm Views2546
    Read More
  22. audio html5 태그

    Date2012.02.02 Category기타팁 Bygsm Views6515
    Read More
  23. embed 스타일

    Date2011.11.11 Category기타팁 Bygsm Views8134
    Read More
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에는 나눔글꼴이 설치되어 있지 않습니다.

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

설치 취소