Lone Tiger Poet

ataiger.byus.net의 메인 페이지를 만드는 데 글꼴을 CSS로 지정했다. 텍스트 에디터로 만든 정말 간단한 페이지지만 IE, Firefox, Opera에서 같은 화면을 보이게 하는게 쉽지가 않다. 글꼴이 문제다.

요즘엔 Lucida Grande의 매력에 푹 빠져서 위 페이지의 시 부분 글꼴과 <h1>, <h2> 글꼴을 Lucida Grande로 지정하고 두 개의 제목 태그에는 Lucida Grande Bold를 지정하는 것이 나의 의도다. 내가 사용하는 브라우저는 IE7, Firefox 2.0, Opera 9.10이다.

IE7은 내가 어떻게 CSS를 작성하던 대충 잘 보여주는 것 같다. 그런데 문제는 FF와 Opera의 차이에 있다.

먼저, 제목 부분(Lucida Grande Bold)의 CSS에 font-family를 'Lucida Grande', 그리고 font-weight를 bold로 써 주면 FF는 Lucida Grande의 기본 모양이 나오고 Opera는 Lucida Grande의 bold 글꼴이 나온다. 그래서 이상하길래 CSS의 'Lucida Grande'를 'Lucida Grande Bold'로 바꾸어 적었는데 이번엔 FF에서 제대로 해당 글꼴의 bold가 나오고 Opera는 글꼴을 찾지 못했다. 확인은 안했지만 IE7에서는 두 표현 모두 Lucida Grande Bold를 출력하는 듯 하다. 그래서 결국은 이렇게 적었다.

font-family: 'lucida grande bold', 'lucida grande', sans-serif;
font-weight: bold;

(물론 실제로는 다른 속성들이 있지만 대충 이부분만 적어본다면 이렇다)

이렇게 하면 일단 두 브라우저에서 내가 원하는대로 출력이 된다.

왜 그런지 알 수 없지만 Opera는 몇몇 글꼴을 표시하지 못하는 듯 하다. Dotum(돋움)을 CSS로 글꼴 지정해 두어도 그냥 굴림이나 CSS sans-serif로 브라우저에서 지정한 글꼴이 출력된다. 왜일까?

몇 번 더 실험을 해 보니, Opera는 '돋움'은 인식하지만 'dotum'은 인식하지 못한다.