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

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

티스토리에서 한국어와 일본어를 같이 쓰고 싶은 분들을 위한 글이다.

티스토리는 기본적으로 한국어 웹사이트이며, 일본어를 쓴다고 하더라도 폰트가 제대로 표시되지 않는다. 예를 들어, 아무 설정도 하지 않은 일반적인 티스토리 블로그에서 近자를 쓴다면, 점이 2개로 표시될 것이다.

하지만, 이 글자는 일본의 신자체가 아니다. 제대로 표시된다면 점이 하나로 표시되어야 한다.

이 블로그는 설정이 되어 있기 때문에 일본 신자체로 보일 것이다.

다음은 설정법이다.

 

@font-face {
    font-family: 'DataEntryMSB';
    src: 
         local('メイリオ'),
         local('Meiryo'),
         local('MS Gothic'),
         local('Kosugi'),
         local('Noto Sans CJK JP'),
         local('Noto Sans JP');
         url('./images/업로드한폰트명.ttf');
    unicode-range: 
        U+3000-303F, /* 부호 */
        U+3040-309F, /* 히라 */
        U+30A0-30FF, /* 가타 */
        U+FF00-FF9F, /* 전반 */
        U+4E00-9FFF, /* 간지 */
        U+3400-4DBF; /* 간지 */
}

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

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

다 집어 넣었다면 완성이다.

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

lang 태그를 붙이면 웹폰트도 필요 없고, 브라우저 설정을 따라가서 좋은데, 아쉽다.

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

 

* 이 방법으로는 아직 모바일 환경에서 폰트를 제대로 표시할 수 없다.

* 조만간 업데이트 하겠다.

* 업데이트 완료~ 아래글 참고바람

https://dataentrymsb.tistory.com/26

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