'글꼴'에 해당되는 글 2건

  1. 2008/07/18 오늘의 링크 (공개한글서체, 실시간 음악듣기, 방송보기)
  2. 2007/11/16 CSS 속성중 font-family에 대한 고찰.

오늘의 링크 (공개한글서체, 실시간 음악듣기, 방송보기)

  • 공개한글서체
    공개(=?무료) 한글 서체 입니다. 공개용 한글서체를 일목요연하게 잘 정리해주셨습니다.

  • 아시아의 소셜네트워크
    웹전문가라고 불리시는 태우님의 아시아의 소셜네트워크에 대한 프레젠테이션자료 입니다.
    아주 보기좋게 잘 정리해주셨네요.

  • 소리질러
    별다른것 설치하지 않고 간단하게 웹상에 있는 음원을 재생시켜줍니다.

  • Dabdate
    마찬가지로 액티브액스나 별다른것 설치하지 않고 지난 방송을 스트리밍방식으로 보여주는 웹사이트 입니다. 속도도 감상하기에 아주 쾌적합니다.
크리에이티브 커먼즈 라이선스
Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.
블로그코리아에 블UP하기
Trackback 0 Comment 0

Trackback : http://trend21c.tistory.com/trackback/363 관련글 쓰기

CSS 속성중 font-family에 대한 고찰.

<!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정도가 쓰이는 현실인것 같습니다.
크리에이티브 커먼즈 라이선스
Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.
블로그코리아에 블UP하기
Trackback 0 Comment 0

Trackback : http://trend21c.tistory.com/trackback/286 관련글 쓰기

prev 1 next