반응형
웹 페이지 작업을 하고 브라우저 크로스 브라우징을 할 때 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 |
광고차단(애드블록)프로그램이나 브라우저를 사용중이시면 프로그램을 비활성화이나 블로그 주소를 예외 처리 해주시면 광고가 노출됩니다. 귀찮고 번거롭겠지만 광고 클릭은 저에게는 큰 힘이 됩니다. 🙇🏻♂️🙇🏻♀️
제 블로그의 모든 글은 제가 직접 작성 하고 다른 글을 참고할 때는 이전 글보다 읽기 편하게 수정해서 작성하고 있습니다. 커피 한잔 사먹고 더 열심히 좋은글로 보답하겠습니다.
오늘도 제 블로그에 와 주셔서 감사합니다. :)
제 블로그의 모든 글은 제가 직접 작성 하고 다른 글을 참고할 때는 이전 글보다 읽기 편하게 수정해서 작성하고 있습니다. 커피 한잔 사먹고 더 열심히 좋은글로 보답하겠습니다.
오늘도 제 블로그에 와 주셔서 감사합니다. :)
