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메가 이상되는 것도 있다. 트래픽이 부족하신분들은 사용자제요

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


List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
공지 xe레이아웃 데모사이트 관련 gsm 2013.05.07 8682
공지 XE 홈피 XE 버젼 업에 따른 관리자 페이지 변경 file gsm 2013.04.28 9327
공지 기타팁 원격 프로그램 팀뷰어 file gsm 2012.12.13 9343
공지 기타팁 초보자들을 위한 홈피만들기에 개념? gsm 2012.10.16 9945
공지 XE 홈피 xe 설치과정입니다. gsm 2012.10.05 10085
65 XE 홈피 xe로 홈피 만들기 실전 1 - 개론 gsm 2012.11.12 2526
64 연습용 홈페이지 형식의 자기소개서? file gsm 2012.10.31 1761
63 XE 홈피 지금까지 사용해본 레이아웃 file gsm 2012.10.31 2334
62 XE 홈피 xe 설치 두번째 gsm 2012.10.25 2648
61 기타팁 풀다운 메뉴 file gsm 2012.10.05 1575
60 제로보드4 제로보드 4 설치과정 file gsm 2012.07.15 1696
59 연습용 언젠가 만들었던 연습용 홈피 file gsm 2012.06.19 1784
58 연습용 사진배경 홈피 file gsm 2012.05.03 1947
» 기타팁 웹폰트 file gsm 2012.03.22 2797
56 XE 홈피 xe.. 제로보드 4처럼 사용하기.. gsm 2012.03.20 5690
55 연습용 테이블 레이아웃 두번째 file gsm 2012.03.20 1754
54 기타팁 배경 x,y축으로 반복 또는 한번만 출력 gsm 2012.03.19 1565
53 연습용 테이블을 이용한 xe레이아웃 도전 file gsm 2012.03.11 1819
52 연습용 xe 홈피만들기 연습 file gsm 2012.03.07 1999
51 연습용 제로보드4 노프레임 홈피파일 file gsm 2012.02.20 2247
50 기타팁 포토샵 액션을 이용한 초간단 사진효과 file gsm 2012.02.15 2545
49 기타팁 audio html5 태그 file gsm 2012.02.02 6514
48 기타팁 embed 스타일 file gsm 2011.11.11 8125
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에는 나눔글꼴이 설치되어 있지 않습니다.

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

설치 취소