크롬에서 트위터의 한글 깨짐(콜론 생김) 현상크롬에서 트위터의 한글 깨짐(콜론 생김) 현상

Posted at 2013. 7. 1. 22:58 | Posted in 프로그래밍 언어/HTML/CSS

크롬을 사용하다보면 간혹 한글이 이상하게 보이는 사이트가 있습니다.

대표적인 곳이 트위터.



그냥 무시하고 쓰다가.. 영 거슬려서 해결책을 찾아봤습니다.

CSS에서 text-rendering 항목을 auto로 바꾸면 된다고 하네요. (http://wpu.kr/tip/some-themes-chrome-hangul-colon/)


그래서 한번 트위터의 CSS를 봤습니다.

위 처럼 콜론이 생기는 부분을 봤더니, 대략 조건이 다음과 같아 보입니다.


  • HTML 태그는 h1 ~ h6
  • CSS에서 text-rendering: optimizeLegibility
  • 폰트는 영문 폰트. 특이한건 대표폰트로 Arial이나 Verdana 같은걸 놓고 서브로 sans-serif를 설정했을 때에만 발생..


..... 복잡하네요.

뭐 조건이 어떻든 간에, text-rendering 항목을 auto로 바꾸면 해결된다고 하니, CSS를 수정합니다.


그런데 트위터는 제가 맘대로 CSS를 바꾸고 그럴 수가 없으니까..

크롬 브라우저에서 사용자 전용 CSS를 적용했습니다. (http://circleses.tistory.com/23)

위 블로그에도 나와있지만, 아래 파일을 연 다음

appdata\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

다음과 같이 입력하고

h1, h2, h3, h4, h5, h6 { text-rendering: auto !important; }

저장!

브라우저를 끄거나 새로고침 할 필요 없이 바로 적용 됩니다.



와~

//