IT/HTML & CSS

사파리(Safari) 브라우저에서 폰트가 깨지는 현상 해결하기

라임웨일 2021. 3. 9. 16:40
반응형

 

웹 페이지 작업을 하고 브라우저 크로스 브라우징을 할 때 Safari 브라우저에서 한글이나 한자가 깨지는 경우가 종종 발생합니다. (일반 윈도우 PC에서 사파리(Safari) 브라우저를 다운받아서 설치한 경우에는 해당 현상이 안 나타나지만 Mac PC에 설치된 사파리(Safari) 브라우저 볼 때 폰트가 깨지는 현상이 발생합니다.)

 

이런 이유는 일반적으로 크게 2가지 이유 중 하나입니다. 

 

1. 언어셋

가장 많은 이유인데 브라우저 창에서 보기(view) - 인코딩 (Default Encoding) 부분을 UTF-8, 한글(ISO), window 중 선택하면 대부분 해결됩니다.  폰트가 깨지는 현상의 대부분은 인코딩이 충돌하기 때문에 발생합니다.

2. 기본 언어의 한자 지원 여부

한글이 아니라 한자가 깨지는 경우라면 CSS에서 기본으로 선언된 font-family가 무엇인지 확인하여야 합니다.

단편적인 예로  CSS에서 선언한 기본 font가 "맑은 고딕"으로 선언되어 있다면 사파리(Safari) 브라우저에서는 한자가 깨져서 보이게 되는데요. 이유는 맑은 고딕 폰트는 한자를 별도로 지원하지 않기 때문입니다.

이때 한자 부분의 폰트를 "돋움"으로 바꾸게 되면 정상적으로 나오는 것을 확인할 수 있습니다. 

 

반응형