윈도우 사파리에서 중국어, 일본어 글자가 깨지는 경우

홈페이지를 구축하면서 영어/한국어/일본어/중국어를 각각 지원하도록 하는데, 브라우져별로 내용이 상이하게 나오는 경우가 허다하다.

전문 CSS 개발자는 쉽게 찾을 수 있는 문제겠지만 서버사이드 개발이나 디자인 개발을 주로하는 경우 난감해 질수 있으므로 정리해 보고자 한다.

특히 윈도우+사파리(safari)인 경우 제일 많이 깨지는 것을 경험하게 된다.

이런경우는 다음의 처리를 통해서 어느정도 글자가 깨지는것을 방지할수 있다.

우선 각 언어별로 css파일을 분리해야 한다. 이유는 폰트가 모든언어를 다 지원하지 않기 때문이다.

테스트1. 먼저 깨지는 화면에서 CSS를 모두 제거하고 브라우져에서 확인해보라. 이경우 깨지지 않고 정상으로 나온다면 이는 css에서 정의한 폰트가 해당 언어/브라우저에서 지원하지 않기 때문이다.

사파리의 경우 Mac+Safari에서는 아주 깔끔하게 처리되서 나오지만 Windows + Sarari는 중국어,일본어 심지어는 한국어까지 깨지는 경우도 있다. 

다음의 코드를 보자.

.news_body .news_list dl dd a:hover {color:#86500f;}

.news_body .news_list dl dd a span {font-family:"Malgun Gothic","Apple Gothic","Dotum","Tahoma","MS PGothic";}

이렇게 공통의 css파일을 처리해서 붙여넣게 된다. 이경우는 다음과 같이 분리해 보자.

각 폰트별로 제공하는 언어를 선별적으로 선택해서 적재하도록 분리하자.

위의 폰트는 언어별로 다음과 같이 분리했다.

영어는 모든 폰트에서 지원하는지 모르겠지만 중국어/일본어의 경우 지원폰트가 지극히 제한적일 수 있기 때문에 일반적인 경우처럼 폰트를 정의하는데, 특히 주의해야 할것으로 보인다.

Korean

{font-size:12px; font-family:"Malgun Gothic","Apple Gothic","Dotum","Nanum Gothic"; }

English

{font-size:12px; font-family:"Malgun Gothic","Apple Gothic","Dotum","Tahoma","MS PGothic";}

Chinese

{font-size:12px; font-family:"Tahoma","MS PGothic";}

Japan

{font-size:12px; font-family:"Tahoma","MS PGothic";}