반응형

웹 페이지 작업을 하고 브라우저 크로스 브라우징을 할 때 Safari 브라우저에서 한글이나 한자가 깨지는 경우가 종종 발생합니다. (일반 윈도우 PC에서 사파리(Safari) 브라우저를 다운받아서 설치한 경우에는 해당 현상이 안 나타나지만 Mac PC에 설치된 사파리(Safari) 브라우저 볼 때 폰트가 깨지는 현상이 발생합니다.)
이런 이유는 일반적으로 크게 2가지 이유 중 하나입니다.
1. 언어셋
가장 많은 이유인데 브라우저 창에서 보기(view) - 인코딩 (Default Encoding) 부분을 UTF-8, 한글(ISO), window 중 선택하면 대부분 해결됩니다. 폰트가 깨지는 현상의 대부분은 인코딩이 충돌하기 때문에 발생합니다.
2. 기본 언어의 한자 지원 여부
한글이 아니라 한자가 깨지는 경우라면 CSS에서 기본으로 선언된 font-family가 무엇인지 확인하여야 합니다.
단편적인 예로 CSS에서 선언한 기본 font가 "맑은 고딕"으로 선언되어 있다면 사파리(Safari) 브라우저에서는 한자가 깨져서 보이게 되는데요. 이유는 맑은 고딕 폰트는 한자를 별도로 지원하지 않기 때문입니다.
이때 한자 부분의 폰트를 "돋움"으로 바꾸게 되면 정상적으로 나오는 것을 확인할 수 있습니다.
반응형
'IT > HTML & CSS' 카테고리의 다른 글
| display:none과 visibility:hidden의 차이 (0) | 2021.03.10 |
|---|---|
| "text-indent" : -9999px 코드 대체하기 (3) | 2021.03.09 |
| 모바일에서 caption 속성 처리 시 유의점 (0) | 2021.03.09 |
| 누구나 쉽게 가로 스크롤 메뉴 적용하기 (2) | 2021.03.09 |
| 스킵 내비게이션 쉽게 구현하고 이해하기 (0) | 2021.03.09 |
보신 글이 조금이라도 도움이 되었으면 좋겠습니다.
오늘도 제 블로그에 와 주셔서 진심으로 감사합니다. :)
오늘도 제 블로그에 와 주셔서 진심으로 감사합니다. :)