웹폰트에 대해 알아보자.
웹폰트는 말 그대로 웹에 font를 올려놓고 사용하는 것이다.
웹폰트의 장점은, 아래 표에 나와있듯이 거의 모든 브라우저에서 사용 가능하다는 것이다.
웹폰트는 브라우저에 따라 확장자가 다르다.
1. IE 6~8 : eot
2. 옛표준(파이어폭스,크롬,사파리,오페라) : ttf, otf
3. 최신버전의 브라우저들 : woff (web open font format)
4. 모바일 : svg
웹폰트를 사용하는 방법에는 세 가지가 있다.
1. 클라우드(cdn)
2. 직접 만들어서 사용
3. 다운 받아서 사용
웹폰트를 제공하는 곳
구글 : https://developers.google.com/fonts/docs/getting_started?hl=ko-KR
1. 클라우드(cdn)
위 구글폰트 사이트에 나와있는 예제를 살펴보면 이렇다.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>style로 cdn에서 font를 불러와서 사용한다.
결과값.
2, 3. font를 다운 또는 만들어서 사용
eot, ttf, woff, svg 이렇게 4가지를 만들어서 웹서버에 올려놓고 사용하는 방법이다.
font 생성 : http://www.fontsquirrel.com/tools/webfont-generator
위 사이트에서 font를 각 포맷으로 간편하게 생성할 수 있다.
생성해서 다운받은 폰트를 웹서버에 올려놓고 아래 코드처럼 작성하면 된다.
<html> <head> <style> @font-face { font-family: 'MyFont'; /* 내가하고싶은 폰트 이름 */ src: url('fonts/myfontfile.eot');
src: url('fonts/myfontfile.eot?#iefix') format('embedded-opentype'),
url('fonts/myfontfile.woff') format('woff'),
url('fonts/myfontfile.ttf') format('truetype'),
url('fonts/myfontfile.svg#MyFont') format('svg');
font-weight: normal;
font-style: normal; }
/* CSS 적용 */
h1#font {
font-family: 'MyFont', sans-serif;
} </style> </head> <body> <h1 id="font">Making the Web Beautiful!</h1> </body> </html>
참고 : http://www.w3.org/TR/css3-webfonts/#the-font-face-rule
'CSS' 카테고리의 다른 글
| CSS3 mask 속성 (0) | 2013.06.24 |
|---|---|
| CSS 커서 속성 모음 (0) | 2013.05.31 |
| CSS3 을 IE6,7,8 에서 인식하게 하는 방법 (0) | 2013.05.10 |
| box-shadow 와 text-shadow 의 사용 (0) | 2013.05.07 |
| CSS3 rgba / opacity 의 사용 (2) | 2013.05.07 |