프리랜서 웹디자이너 RELATION RELATION.CO.KR

RELATION 로고

홈페이지 소스

[HTML] 웹폰트의 사용법

2006.06.21
설명: 웹폰트의 작동원리는 간단합니다.

DHTML의 태그에는 @font-face 라는 것이 있습니다.

웹폰트는 이 @font-face 태그를 이용합니다.

문법은

<style type=text/css>
<!--
@font-face {font-family:폰트이름; src:url(웹폰트로 사용할 파일의 주소);}
-->
</style>

위 문장의 의미는 :

url에 있는 폰트파일을 이용하여, 임시적으로 "폰트이름"으로 지정된 폰트를

방문자의 컴퓨터에 설치하라는 문장입니다.

위 한줄의 문장으로 방문자의 컴퓨터에는 해당폰트가 임시적으로 설치됩니다.

이제 폰트가 설치되었으니, 해당폰트를 사용하기만 하면 됩니다.

사용 방법은 다음과 같습니다.

<font style="font-family:폰트이름; font-size:사이즈pt">내용</font>

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3510
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3498
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2162
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20762
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 52
225 [소스] Window.scroll() 꿘쓰 2020.06.22 59
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.05.29 93
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 169
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 321
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 350
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 517
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 613
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 585
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 574
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
212 [소스] 별점주기 꿘쓰 2019.02.21 678
211 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 670
210 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 872
209 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 619
208 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 663