firefox 3.1에서 font-face 구현되다

티스토리 뷰

WEB2.0/웹표준

firefox 3.1에서 font-face 구현되다

나를찾는아이 2008. 10. 15. 16:19

728x90

http://trio.co.kr/webrefer/css2/fonts.html#font-descriptions

@font-face 는 사용자의 PC에 설치되어있지 않은 글꼴을 보여주는 디자인적으로 아주 중요한 CSS 속성입니다.

아래와 같이 url에 임베딩하려는 글꼴파일이 위치한 경로를 적으면 해당 글꼴이 사용자의 PC에 다운로드되어져

여러 폰트에 의한 디자인적인 효과를 줄수 있습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<HTML>

   <HEAD>

      <TITLE>글꼴 테스트</TITLE>

      <STYLE TYPE="text/css" MEDIA="screen, print">

         @font-face {

            font-family: "Robson Celtic";

            src: url("http://site/fonts/rob-celt")

         }

         H1 { font-family: "Robson Celtic", serif }

      </STYLE>

  </HEAD>

  <BODY>

     <H1> 이 제목은 Robson Celtic을 사용하여 디스플레이된다.</H1>

  </BODY>

</HTML>

특히나 한글의 경우 윈도우즈에서는 웹에서 사용할수 있는 폰트가 굴림과 돋음밖에 없고

비스타에 접어들어서야 맑은 고딕이 추가된 상태입니다.

MS계열의 브라우저는 eot 라는 확장자를 사용하는 웹폰트 기술을 사용하여

@font-face 속성을 이미 예전에 구현하였고

다른 브라우저는 @font-face 가 표준규격을 비롯한 여러가지 문제로 구현되지 않았었습니다.

이번에 파이어폭스가 3.1로 업데이트를 하면서 @font-face를 구현하였다고 합니다.

http://developer.mozilla.org/index.php?title=En/CSS/%40font-face

<html>

<head>

  <title>Web Font Sample</title>

  <style type="text/css" media="screen, print">

    @font-face {

      font-family: "Bitstream Vera Serif Bold";

      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");

    }

    

    body { font-family: "Bitstream Vera Serif Bold", serif }

  </style>

</head>

<body>

  This is Bitstream Vera Serif Bold.

</body>

</html>

사용방법은 기존의 방법과 차이는 없습니다.

다만 MS계열의 브라우저는 eot라는 확장자의 웹폰트 경로를 url에 적어야 하고

파이어폭스는 ttf 의 트루타입폰트를 url에 입력해야합니다.

그래서 사용방법에는 차이가 없지만 그 방식에서 차이가 있기에

IE와 FF 양쪽 브라우저에서 모두 font-face를 동일하게 적용시킬수는 없지만

이번 파이어폭스의 업데이트로 인해서 한결 CSS의 활용이 풍부해질것 같습니다.

728x90

'WEB2.0 > 웹표준' 카테고리의 다른 글

가장 많이 사용하는 CSS 클래스명 10개 (1)	2009.01.07
당신의 코드를 깔끔하게 하는 12가지 원칙 (0)	2008.12.15
귀찮은 엘리먼트 속성값(scrollTop,pageXoffset,scrollX)을 금방 찾게 도와주는 유용한 링크소개 (2)	2008.10.01
CSS 마스터 10가지 원칙 (1)	2008.09.02
HTML과 XHTML에서 내가 작성한 CSS가 잘 적용되었는지 테스트해보기 (2)	2008.09.02

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/01 »
일	월	화	수	목	금	토
			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

글 보관함

나를 찾는 아이

티스토리 뷰

firefox 3.1에서 font-face 구현되다

'WEB2.0 > 웹표준' 카테고리의 다른 글

티스토리툴바