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

전문 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";}



발췌  : Ajax Programming 기초부터 중급까지 - 가메출판사, 최범균

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
 <meta http-equiv="content-type" content="text/html; charset=euc-kr" />
 <title>CSS Class 변경</title>
 <script type="text/javascript" src="ajax.js"></script>
 <script type="text/javascript">
 window.onload = function() {
  var redRadio = document.getElementById("red");
  var blueRadio = document.getElementById("blue");
  var blackRadio = document.getElementById("black");
 
  ajax.Event.addListener(redRadio, "click",
   ajax.Event.bindAsListener(doClickOnRadio, redRadio));
  ajax.Event.addListener(blueRadio, "click",
   ajax.Event.bindAsListener(doClickOnRadio, blueRadio));
  ajax.Event.addListener(blackRadio, "click",
   ajax.Event.bindAsListener(doClickOnRadio, blackRadio));
 }
 
 function doClickOnRadio() {
  var view = document.getElementById("view");
  alert(this.value);
  view.className = this.value;
 }
 
 function fncChangeBlue()
 {
  var view = document.getElementById("myView");
  view.className = 'myBlack';
 }
 </script>
 <style type="text/css">
 div.red {
  font-weight: bold;
  color: red;
  background-color: #00FFFF;
 }
 div.blue {
  font-weight: bold;
  color: blue;
  background-color: #FFFF00;
 }
 div.black {
  font-weight: bold;
  color: #000000;
  background-color: #CCCCCC;
 }
 .myBlack {
  font-weight: bold;
  color: #000000;
  background-color: #CCCCCC;
 }
 </style>
</head>
<body>
<div id="view" class="black">스킨을 변경해보세요.</div>
<form name="f">
<input type="radio" name="skinName" id="red" value="red" />RED
<input type="radio" name="skinName" id="blue" value="blue" />BLUE
<input type="radio" name="skinName" id="black" value="black" checked="checked" />BLACK
<div id="myView">
<a href="javascript:fncChangeBlue()">변경하기.</a>
</div>
</form>
</body>
</html>