폰트-브라우져에서-깨져보일때

폰트 브라우져에서 깨져보일때

한글 폰트가 사파리 브라우저에서 그래픽이 깨져보이는 문제는 몇 가지 이유로 발생할 수 있습니다. 다음은 이 문제를 해결하기 위한 몇 가지 가능한 해결책입니다.

  1. 웹폰트 사용: 사파리 브라우저에서 한글 폰트가 깨져보일 경우, 웹폰트를 사용하여 해당 폰트를 웹사이트에 직접 포함시킬 수 있습니다. 이를 통해 사용자의 컴퓨터에 해당 폰트가 설치되어 있지 않더라도 웹폰트를 통해 폰트를 렌더링할 수 있습니다.
  2. 다양한 폰트 형식 지원: 한글 폰트를 사용할 때는 여러 가지 폰트 형식(woff, woff2, ttf 등)을 지원하는지 확인해야 합니다. 다양한 폰트 형식을 제공함으로써 브라우저에서 폰트를 렌더링하는 데 필요한 최적의 형식을 선택할 수 있습니다.
  3. 폰트 경로 확인: 한글 폰트 파일의 경로가 올바른지 확인해야 합니다. 폰트 파일의 경로가 잘못되거나 폰트 파일이 존재하지 않는 경우에는 폰트가 올바르게 로드되지 않을 수 있습니다. 폰트 파일의 경로를 확인하고 필요한 경우 경로를 수정해야 합니다.
  4. 폰트 로딩 지연 문제: 한글 폰트가 로딩되는 동안 그래픽이 깨져보일 수 있는데, 이는 폰트 로딩이 지연되어 발생하는 문제입니다. 이 경우에는 폰트 로딩을 최적화하고, 필요한 경우 폰트 프리로딩(preloading)을 사용하여 폰트 로딩 속도를 개선할 수 있습니다.
  5. 반응형 디자인 고려: 사파리 브라우저에서 한글 폰트가 그래픽이 깨져보인다면 반응형 디자인을 고려해야 합니다. 다양한 뷰포트 크기와 장치에서 폰트가 올바르게 표시되도록 폰트 크기와 줄 간격 등을 조정할 수 있습니다.

위의 해결책 중 하나를 시도하여 한글 폰트가 사파리 브라우저에서 그래픽이 깨져보이는 문제를 해결할 수 있습니다.

※ 아래 CSS 코드를 추가하여 확인해 볼 수 있다.

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

다른방법으로는 SVG 폰트를 사용하면 되지만, 용량 부분이 문제가 생길수 있기때문에  추천하지 않는다.