'폰트'에 해당되는 글 6건
- 2008/10/15 firefox 3.1에서 font-face 구현되다 (3)
- 2008/08/27 글자가지고 한번 재미있게 놀아볼까?
- 2008/07/18 오늘의 링크 (공개한글서체, 실시간 음악듣기, 방송보기)
- 2008/05/14 오늘의 링크
- 2007/11/16 CSS 속성중 font-family에 대한 고찰.
- 2006/10/28 요즘 verdana 폰트에 빠져버렸다.
firefox 3.1에서 font-face 구현되다
분류없음 2008/10/15 16:19
@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의 활용이 풍부해질것 같습니다.
Trackback : http://trend21c.tistory.com/trackback/430
-
-
joogunking 2008/10/19 22:06
MS는 왜 TTF를 이용하지 않고 eot를 만든걸까요?
개인적으로 웹페이지 폰트무시를 사용하고 있지만 반가운 소식입니다. 감사합니다.
글자가지고 한번 재미있게 놀아볼까?
분류없음 2008/08/27 22:11
게다가 이 서비스에서 제공하는 기능을 글로 표현하기가 어렵네요.
http://fontpark.morisawa.co.jp/
바로 특정 글자가지고 장난쳐보는 사이트 입니다.
일본웹서비스인데
아쉽게도 영어, 일본어, 몇몇의 한자들 그리고 숫자는 재미있게 가지고 놀수가 있는데
한글이 지원이 안되서 아쉽기만 합니다.
일단 문자를 불러옵니다. 글자는 글자를 구성하는 요소요소를 재미있게 분리해서 가지고 놀수 있습니다.
글자로 만든 이미지들입니다. 어떤가요? 멋지죠?
꼭 글자를 이용해서 그림이 아니더라도 문자를 변형해서 개성있는 "아트"를 창조해낼수 있는 웹서비스 입니다.
한번 방문해보세요. 경쾌한 사운드 까지 곁들여져서 더욱 재미있습니다.
Trackback : http://trend21c.tistory.com/trackback/393
오늘의 링크 (공개한글서체, 실시간 음악듣기, 방송보기)
분류없음 2008/07/18 23:19
- 공개한글서체
공개(=?무료) 한글 서체 입니다. 공개용 한글서체를 일목요연하게 잘 정리해주셨습니다. - 아시아의 소셜네트워크
웹전문가라고 불리시는 태우님의 아시아의 소셜네트워크에 대한 프레젠테이션자료 입니다.
아주 보기좋게 잘 정리해주셨네요. - 소리질러
별다른것 설치하지 않고 간단하게 웹상에 있는 음원을 재생시켜줍니다. - Dabdate
마찬가지로 액티브액스나 별다른것 설치하지 않고 지난 방송을 스트리밍방식으로 보여주는 웹사이트 입니다. 속도도 감상하기에 아주 쾌적합니다.
Trackback : http://trend21c.tistory.com/trackback/363
- 7 Applications to Make Working with MySQL Databases Easier
mysql을 사용하는데 있어서 도움이 되는 7가지 어플리케이션입니다. - Internet Trends 2008 - Morgan Stanley
세계적인 투자회자 모건 스탠리에서 발표한 인터넷 트렌드라고 하는데 아주 좋은 자료군요. - fontstruct
손쉽게 폰트를 만들어주는 사이트입니다. 메인플래시영상이 압권입니다.
Trackback : http://trend21c.tistory.com/trackback/352
CSS 속성중 font-family에 대한 고찰.
분류없음 2007/11/16 09:21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>font-family</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
p {font-family:dotum}
p.with {font-family:dotum,돋움}
</style>
</head>
<p>
p {font-family:dotum} 일때 어떻게 출력이 되는지 봅시다
IE와 FF에서는 정상적으로 돋움체로 나타납니다.
그러나 opera와 safari에서는 기본폰트로 나타납니다.
</p>
<p class="with">
p.with {font-family:dotum,돋움} 일때 어떻게 출력이 되는지 봅시다.
IE, FF, opera, safari 모두 돋움폰트로 나타납니다.
</p>
</body>
</html>위의 예제를 실행시켜보면 어떤 내용인지 쉽게 알수 있습니다.
우리나라에서는 폰트의 부재로 인해
돋움 또는 굴림만이 웹용으로 쓰이는 절대적 한계에 놓여있습니다.
비스타에서 맑은 고딕을 지원하기는 하나
아직 XP사용자가 대다수인만큼 맑은 고딕을 사용하기에는 무리가 있습니다.
몇몇 사이트에서 보면
최초 폰트에 관한 공통 CSS선언부분에서
font-family:dotum 이렇게만 쓰여있는 곳을 많이 볼수 있습니다.
하지만 위의 예제에서 알수 있듯이
IE와 FF는 dotum으로 렌더링하지만 opera와 safari는 기본폰트로 렌더링을 합니다.
그렇기때문에 한글로 돋움이라고 추가로 적어주셔야 합니다.
그렇게 하실경우 모든 브라우저에서 돋움폰트로 렌더링 되는 모습을 볼수 있습니다.
http://trio.co.kr/webrefer/css2/fonts.html#font-family-prop
선택 글꼴 가족의 이름이다. 앞의 예제에서, "Baskerville", "Heisi Mincho W3", "Symbol"들이 글꼴 가족들이다. 공백을 갖는 글꼴 가족 이름들은 따옴표를 하여야 한다. 만일 따옴표가 생략되면, 글꼴 이름 앞과 뒤의 공백 글자들은 무시되고, 글꼴 이름 안의 여러개의 공백 글자들은 단일 공백으로 변환된다.
font-family 는 글꼴을 지정합니다. 글꼴은 콤마를 기준으로 여러개 나열할수 있는데
제일 앞에 정의되어있는 순서대로 브라우저는 렌더링을 합니다.
예를 들어 font-family:Verdana,AppleGothic 이라고 지정할 경우
제일 먼저 verdana로 렌더링을 하려고 하고 해당 폰트가 없을시에
AppleGothic으로 렌더링을 합니다.
주의할 사항중의 하나는 CSS 스펙에도 언급되어있듯이 공백을 가진 글꼴 이름은 따옴표를 하여야 합니다.
사실 우리나라에서는 굴림 또는 돋움 영문,숫자에는 verdana정도가 쓰이는 현실인것 같습니다.
Trackback : http://trend21c.tistory.com/trackback/286
요즘 verdana 폰트에 빠져버렸다.
분류없음 2006/10/28 12:19
꽤나 매력적인 폰트.
