티스토리에서 일본어 한자 제대로 보여주기 위한 설정법

티스토리 일본어 대응 CSS 편집 방법

티스토리에서 한국어와 일본어를 같이 쓰고 싶은 분들을 위한 글입니다.
티스토리는 기본적으로 한국어 웹사이트이며, 일본어를 쓴다고 하더라도 폰트가 제대로 표시되지 않습니다. 예를 들어, 아무 설정도 하지 않은 일반적인 티스토리 블로그에서 近자를 쓴다면, 점이 2개로 표시될 것입니다.
하지만, 이 글자는 일본의 신자체가 아닙니다. 제대로 표시된다면 점이 하나로 표시되어야 합니다.
이 블로그는 설정이 되어 있기 때문에 일본 신자체로 보일 것입니다.
다음은 설정법입니다.

 

@font-face {
    font-family: 'Japanese';
    src: 
         local('メイリオ'),
         local('Meiryo'),
         local('MS Gothic'),
         local('Hiragino Kaku Gothic Pro'),
         local('Hiragino Sans'),
         local('Yu Gothic Medium'),
         local('Hiragino Sans'),
         local('Kosugi'),
         url('./images/업로드한폰트명.ttf');
    unicode-range: 
        U+3000-303F, /* CJK Unified */
        U+3040-309F, /* ひらがな */
        U+30A0-30FF, /* カタカナ */
        U+FF00-FF9F, /* 全角&半角 */
        U+4E00-9FFF, /* 漢字 */
        U+3400-4DBF; /* 漢字 */
}

먼저 적당한 일본어 폰트를 골라서 티스토리 스킨 편집 메뉴에서 업로드합니다. 그 다음으로 '업로드한폰트명.ttf'를 업로드한 폰트 이름으로 바꿉니다.

이 CSS를 스킨 편집에서 적당한 위치에 추가하고, 모든 font-family 앞에 설정한 이름을 집어 넣어 줘야 합니다.

다 집어 넣었다면 완성입니다.

더 쉬운 방법으로는 <span lang="ja">를 쓰는 방법이 있지만, 티스토리에서 사용이 불가능하니 이 방법이 최선입니다.

lang 태그를 붙이면 웹폰트도 필요 없고, 브라우저 설정을 따라가서 좋지만, 사용이 불가능하니 어쩌겠습니까.

티스토리가 이 글을 보고 lang 태그를 허용해 주었으면 합니다.

 

 

* 모바일에서 적용하기

https://dataentrymsb.tistory.com/26

티스토리에서 모바일에 스킨이 적용되지 않는 문제 해결하기