Simple is the best, Go to basic

<!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정도가 쓰이는 현실인것 같습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'font'에 해당되는 글 2건

오늘의 링크

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

태그목록

최근글

최근댓글

최근 트랙백