티스토리 뷰
728x90
반응형
<!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정도가 쓰이는 현실인것 같습니다.
728x90
반응형
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 구글
- CSS
- 트위터
- 소프트웨어
- 어플리케이션
- android
- 게임
- 안드로이드
- 앱스토어
- php
- 자바스크립트
- 벤처
- 대학생
- 웹표준
- 스마트폰
- 애플
- JavaScript
- 네이버
- 앱
- 경진대회
- Apple
- 아이디어
- 창업
- 공모전
- 모바일
- iPhone
- AWS
- 아이폰
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
글 보관함