Programming/HTML CSS
보통 웹 브라우저에 특정 폰트로 글자를 표시하려면 해당 폰트가 사용자의 컴퓨터에 설치되어 있어야 합니다.  하지만 세상에 존재하는 모든 폰트가 사용자의 컴퓨터에 다 담겨져 있다는 보장은 할 수 없기에 그 대안으로 웹폰트를 사용합니다.

웹폰트는 사용자가 웹에 접속하게 되면 필요한 웹폰트를 자동으로 내려받아 설치하고 설정된 폰트대로 웹문서를 볼 수 있도록 합니다.

웹폰트는 문서의 헤더에 다음과 같은 구문을 추가함으로서 설치할 수 있습니다.
<head>
 <link href='http://fonts.googleapis.com/css?family=Fruktur' rel='stylesheet' type='text/css'>
</head>
참고로 예제에 설정된 웹폰트는 구글에서 제공하는 것으로 아래 사이트를 방문하면 더 많은 폰트를 보실 수 있습니다.

http://www.google.com/fonts

위에서 처럼 폰트를 설치하고 나면 해당 폰트가 적용될 부분을 CSS로 지정하기만 하면 됩니다.
<style>
 #ff {
  font-family: 'Fruktur', cursive;
 }
</style>
이렇게 하면 아래와 같은 내용이 본문에 포함되는 경우 ff  아이디의 div 내용이 위에서 설치한 폰트로 보여지도록 처리가 이루어 질 수 있습니다.
<div id="ff">KOREA</div>

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 글자 생략하기  (0) 2013.08.21
[HTML] viewport meta  (0) 2013.08.20
[CSS] 웹폰트(Web font)  (0) 2013.08.19
[CSS3] 초기화 코드 사이트  (0) 2013.07.01
[HTML5] track (video 자막)  (0) 2013.06.28
[CSS3] 선택자 - 상태 선택  (0) 2013.06.24
0 0