웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)

font-face 본문

css3

font-face

jokack01 2013. 10. 8. 09:57

@font-face 

 

웹폰트를 다운 받아 사용할 수 있으나 현재 한글은 거의 지원되지 않는다.

WOFF는 웹페이지에서 사용하기 위한 글꼴 형식이다. 일반 트루타입(ttf) 글꼴을 gzip으로 압축한 형태으므로 eot 처럼 크기가 작아서 웹폰트로 사용했을 때 ttf 보다 로딩 시간이 훨씬 짧다.

IE9에서 EOT(Embedded Opentype)과 함께 WOFF(Web Open Font Format)을 지원한다. FF 3.6, Chrome 6, Safari 6, Opera 11.1 이상에서도 WOFF를 지원하므로최신 브라우저에 두루 적용할 수 있는 형식이다

 

font:

기존에는 웹페이지에 나타낼 수 있는 폰트가 사용자의 컴퓨터에 설치된 것만 가능했지만 css3 에서 @font-face 라는 속성이 생기면서 원하는 폰트를 무엇이든 쓸 수 있게 되었다.

이 속성을 사용하여 폰트 파일이 위치된 곳을 연결시키면 언제든지 사용자가 필요할 때 자동적으로 브라우저가 다운 받아 표현할 수 있게 된다.

@font-face 에서 font-family 를 정의하고 폰트 파일이 위치한 url 을 지정하면 된다. 만약 해당 폰트 파일이 css 와 다른 도메인에 위치한다면 연결 url 에서 다른 도메인의 full URL 을 적어주면 된다.

 

  • font-family : 필수. 폰트의 이름을 정의
  • Src : 필수. 폰트를 어디에서 다운 받을 것인지 URL 경로를 지정
  • font-stretch : normal(기본값),  condensed, ultra-condensed, extra-condensed, semi-condensed, expanded, semi-expanded,extra-expanded, ultra-expanded 값이 있으며 글자의 장평(폭)을 지정하지만 대부분의 브라우저에서 아직 미지원함
  • font-style : normal(기본값), italic, oblique 값이 있으며 폰트의 스타일(기울임)을 지정함


ex)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>@font-face</title>
<style>
@font-face{
    font-family:nanumgothicweb;
    src:url(NanumGothic.eot);
    src:local(※),
    url(NanumGothic.woff) format('woff')
}
body,h1,h2,h3,h4,input,button,textarea{
    font-family:'나눔고딕',NanumGothic,nanumgothicweb,'돋움',dotum,Helvetica,sans-serif;
    line-height:16px;
}
/*
** 아래처럼 작성하면 거의 모든 브라우져에서 적용 시킬수 있다. **
@font-face{
    font-family:'글꼴이름';
    src:url('경로/글꼴파일.eot'); // IE9 호환성보기
    src: url('경로/글꼴파일.eot?iefix') format('eot'), // ie6 ~ 8
         url('경로/글꼴파일') format('woff'), // moden browsers
         url('경로/글꼴파일') format('truetype'), // Safari, Android, ios
         url('경로/글꼴파일.svg#svgFontName') format('svg'); // Legacy ios
}
*/
</style>
</head>
 
<body>
<h1>한글의 아름다움을 나눕니다.</h1>
<h2>나눔고딕 폰트 적용 예</h2>
<h3>나눔고딕 폰트 적용 예</h3>
<h4>나눔고딕 폰트 적용 예</h4>
<h5>나눔고딕 폰트 적용 예</h5>
<h6>나눔고딕 폰트 적용 예</h6>
 
</body>
</html>

'css3' 카테고리의 다른 글

3D transform  (0) 2013.10.08
2D transform  (0) 2013.10.08
word-wrap  (0) 2013.10.08
text-shadow  (0) 2013.10.08
background  (1) 2013.10.02
'css3' Related Articles more