font-family 설정시 주의해야 할 점. (CSS)

font-family: 돋음, Dotum, Baekmuk Dotum, Undotum, Apple Gothic, Latin font, sans-serif;



CSS 제작시
font-family: 돋음; 이라고 하면 안 되고,
font-family: 돋음, Dotum, Baekmuk Dotum, Undotum, Apple Gothic, Latin font, sans-serif; 이라고 해야 한다.



돋음과 Dotum을 같이 써야 하는 이유는 비한국어 Windows (최소한 9x/ME)에서는 MS IE조차도 ‘돋음’을 인식하지 못 하기 때문입니다. Apple Gothic은 Mac OS X에 들어 있는 sans-serif에 해당하는 한국어 글꼴 이름입니다. 표 4에서 라틴 글꼴을 비교한 표가 있는데, Windows Corefonts는 다른 OS에서도 사용할 수 있습니다.



한국 모질라 사이트에서 웹 표준화 프로젝트 포럼에 가면, 정말 많은 것을 배울 수 있다. 국내에 웹 사이트들이 웹 표준을 지키고 OS나 브라우저와 관계 없이 접근성을 향상 시키기 위한 사이트 버그 신고 및 문제 해결을 위한 포럼인데, 웹 표준과 관련된 질문의 답변도 해주고 있다. (나도 CSS2의 after, before에 관해 질문하적이 있음)
이곳에서 웹개발자는 Cross Browsing 가이드 참고하세요 라는 글이 있는데, 한국 소프트웨어 진흥원의 의뢰로 차니님이 작업한 Cross Browsing 가이드 웹버전을 볼 수 있다. 이 글의 내용도 무척 유용하지만, 딸린 답글들도 좋은 내용이 많다. 그 중에서 얼마전 웹디자인 작업할 때 참고 했던 내용이 있다.
CSS 제작시 font-family: 돋음; 이라고 하면 안 되고, font-family: 돋음, Dotum, Baekmuk Dotum, Undotum, Apple Gothic, Latin font, sans-serif; 이라고 해야 한다.
그 이유에 대해서는 신정석님의 답글을 인용하면,

돋음과 Dotum을 같이 써야 하는 이유는 비한국어 Windows (최소한 9x/ME)에서는 MS IE조차도 ‘돋음’을 인식하지 못 하기 때문입니다. Apple Gothic은 Mac OS X에 들어 있는 sans-serif에 해당하는 한국어 글꼴 이름입니다. 표 4에서 라틴 글꼴을 비교한 표가 있는데, Windows Corefonts는 다른 OS에서도 사용할 수 있습니다.

라기 때문이다.
이런 좋은 정보가 썩히지 않고 많은 사람들에게 알려졌으면 좋겠다. hooney.net/2005/04/06/32/
워드프레스에서의 Font 수정 및 한글 폰트 사용하기 wordpressblog.co.kr/wordpress-theme/custom-fonts 中 ...,

글꼴 그룹 지정 – font family

우선 폰트는 CSS 파일에서 아래와 같이 선언이 됩니다.


font-family:"Times New Roman",Arial,Helvetica,sans-serif;

위에서 font-family 다음에 쉼표로 각각 구분된 것들이 폰트 이름입니다. Times New Roman의 경우에는 이름 사이에 공백이 있기 때문에 쌍따옴표로 감싸줘야 합니다.
각각의 폰트는 하나로만 되어 있는 것이 아니라 세트로 구성이 되어 있습니다. 윈도우즈의 C 드라이브에 있는 windows 폴더안의 Fonts 폴더를 클릭해서 확인해 볼 수 있습니다. Times New Roman 폰트의 경우, Times New Roman Italic, Times New Roman Bold, Times New Roman Bold Italic 등 총 네개의 폰트가 있는 것을 알 수 있습니다.
Font는 클라이언트(방문자)의 컴퓨터에 있는 폰트를 사용해서 보여주게 됩니다. 즉, 브라우저는 해당 웹문서를 보여주기 위해서 font-family에서 맨 앞에 지정된 폰트를 방문자의 컴퓨터에서 찾아서 적용하며, 해당 font가 없을 경우 그 다음 폰트를 찾아서 사용하게 됩니다.
따라서 대부분의 컴퓨터에 없는 폰트를 지정하게 되면 방문자들은 그 폰트로 웹문서를 보지 못하고 브라우저가 선택한 글꼴로 보게 됩니다. 그래서 보통은 대부분의 컴퓨터에 설치되어 있는 폰트(web safe fonts)를 사용을 하게 됩니다.
fonttester.com에 가면 web safe fonts의 종류와 여러가지 css property를 적용했을 때의 폰트가 어떻게 나오는지 테스트 할 수 있습니다. codestyle.org에서는 각각의 플랫폼(Windows, Mac, Linux)에 따라서 설치된 폰트 통계를 더 자세히 볼 수 있습니다.
맨 마지막에 있는 sans-serif는 특정 글꼴 이름이 아니라 비슷한 형태의 글꼴들의 계열을 말합니다. Generic font family 라고 불리는데, 앞에서 지정한 글꼴들이 없을 때 해당 계열의 글꼴등 중에서 사용하라는 뜻입니다. Generic font family는 아래와 같은 것들이 있습니다.

  • serif(명조 계열) : Times New Roman, Bodoni, Garamond, Minion Web, …
  • sans-serif(고딕 계열) : MS Trebuchet, MS Arial, MS Verdana, Univers, …
  • cursive(필기체) : Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto
  • fantasy(장식체) : Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz
  • monospace(고정폭) : Courier, MS Courier New, Prestige, Everson Mono …

  • 한글 폰트 사용하기

    한글 글꼴은 그 수가 많지 않아서 선택의 폭이 좁습니다. 가변폭 글꼴과 고정폭 글꼴이 있는데 고정폭은 글자사이 간격을 조절할 수 없으므로 가변폭 글꼴을 사용하는 것이 좋습니다.

  • 가변폭 글꼴 : 굴림(Gulim), 돋움(Dotum), 바탕(Batang), 궁서(Gungsuh)
  • 고정폭 글꼴 : 굴림체(GulimChe), 돋움체(DotumChe), 바탕체(BatangChe), 궁서체(GungsuhChe)


  • 만약 굴림을 폰트로 지정하고 싶다면 아래와 같이 하면 됩니다. (한글로 된 폰트명은 공백이 없더라도 쌍따옴표로 둘러싸는 것이 좋습니다.)


    font-family: "굴림", Gulim, Arial, sans-serif;

    브라우저에 따라서 한글 폰트의 영문 이름 이나 또는 한글 이름을 제대로 인식하지 못하는 경우가 있기 때문에, 위와 같이 영문 이름(Gulim)과 한글 이름(굴림)을 모두 써 주는게 안전합니다. 위의 경우엔 한글은 굴림으로 나오고 영문은 굴림폰트 안에 있는 영문을 사용하게 됩니다. 굴림 폰트 안에 있는 영문을 쓰지 않고 별개의 다른 영문 글꼴을 지정하고 싶으면 아래와 같이 영문 글꼴을 맨 앞에 두면 됩니다.


    font-family: Arial, Dotum, "돋움", sans-serif;

    위의 경우, 현재 버전 기준으로, 파이어폭스, 크롬, 사파리에서는 영문은 Arial 폰트를 사용하고 Arial 폰트 안에 없는 한글은 뒤의 돋움 폰트를 사용하게 됩니다. 하지만 인터넷 익스플로러와 오페라에서는 영문은 font-family에서 지정한 Arial 폰트를 사용하고 한글은 브라우저에서 자체적으로 글꼴을 선택해서 사용하고 있습니다. 테스트해 보니 위와 같이 지정했을 경우, IE 8의 경우에는 돋움 글꼴이 안 나오고 굴림이 나오고 Opera는 궁서가 나옵니다.



    출처 : http://camp.top.to/note/board.php?board=camp&command=body&no=2091&category=32

    + Recent posts