CSS 영어, 일본어, 한글 폰트 동시에 적용하는 방법 출처
CSS 영어, 일본어, 한글 폰트 동시에 적용하기
한글과 영어, 일본어의 폰트를 동시에 적용할 수 있을까? 라고 오래전에 생각을 한적이 있었는데, 그 당시에는 힘들었습니다.
문제는 인코딩의 문제로 인해서...
요즘이야 많은 사이트의 인코딩을 UTF-8 을 사용하여, 동일한 페이지에 영어, 일본어, 중국어, 한글을 동시에 사용해도 글자가 깨어지지 않지만, UTF-8을 사용하기 이전에는 불가능했습니다.
한글과 영어를 함께 사용하는 것은 물론 가능했지만, 한글 + 일본어, 한글 + 중국어, 중국어 + 일본어 등으로 사용하는 것은 어느 한쪽의 글자가 깨어져서 사용을 하지 못했습니다. 그러나 요즘은 UTF-8의 사용으로 인해서 동일한 페이지에 여러나라의 글자를 한번에 사용이 가능해져 많이 편리하게 되었습니다.
인코딩은 UTF-8로 사용하면 다국어 페이지 생성이 가능하지만, 다국어의 경우 폰트는 어떻게 적용을 할까요?
다국어 폰트 동시에 적용하는 방법
코딩은 아래와 같이
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
body {
font-family: helvetica, meiryo, gulim; /* 반드시 영문폰트, 일본어 폰트, 한글 폰트 순서로 */
}
</style>
<body>
영어, 한글, 일본어는 여기에 입력...
</body>
</html>
여러 나라 언어를 입력해서 글자가 깨어지지 않기 위해서는 먼저
<meta http-equiv="content-type" content="text/html; charset=utf-8">
에서 인코딩을 utf-8로 설정을 하여야 합니다. 한국의 경우, 이전에는 charset 을 euc-kr 을 많이 사용했으나 다국어 페이지를 생성시에는 반드시 utf-8로 설정을 해야 합니다.
그리고, 가장 중요한 폰트 설정은
body {
font-family: helvetica, meiryo, gulim;
}
와 같이 지정을 합니다. helvetica, meiryo, gulim 순으로 영문 폰트, 일본어 폰트, 한글 폰트 순으로 지정을 하면 됩니다. 일반적으로 영문 폰트의 경우, 일본어와 한글 폰트를 지원하지 않으므로, 영문만 지정한 helvetica 로 표시를 하며, 지원하지 않는 언어의 경우에는 다음 폰트인 meiryo 를 확인, 그 다음 gulim 으로 참조를 합니다.
( 폰트를 지정하지 않았을 경우의 페이지 표시 )
폰트가 지정되지 않았을 경우에는 기본 폰트로 표시가 되어집니다.
( 폰트를 적용하였을 경우 페이지 표시 )
영문에는 helvetica, 한글은 굴림, 일본어는 Meiryo 폰트가 적용됩니다.
가장 중요한 것은 폰트의 순서는 영어, 일본어, 한글 폰트 순이라야 위와 같이 나타나며, 그렇지 않을 경우에는 정확하게 폰트가 표시가 되지 않을수 있습니다.
이렇게 한 페이지에서도 다국어와 각 언어별로 폰트 설정도 가능합니다.