[CSS] IOS Safari에서 Pretendard font-weight 문제

서론

Next.js로 개발하던 와중에 반응형 결과물을 확인하기 위해 IOS Safari로 접속하였는데 폰트 굵기가 내가 의도한것보다 더 굵게 나오는 상황을 맞딱드렸다. 크롬이나 mac으로 사파리로 열면 문제가 없는데 유독 핸드픈으로 접속할 경우에만 이상한 상황이 발생하였다.

해결 방법

해당 문제를 좀 찾아보니 IOS Safari에서는 폰트 합성이 문제가 되고 있다는것을 알게 되었고 특히 font-weight:600 & 700에서 문제가 발생하고 있다는것을 알게되었습니다. 해당 문제의 해결방법은 css 속성 중 브라우저가 폰트 합성을 막는걸로 해결이 되었습니다.

body, html {
  font-synthesis: none;
}

 

font-synthesis 속성은 지정된 글꼴 패밀리에 굵게, 기울임꼴, 소문자 및/또는 아래 첨자 및 위 첨자 글꼴이 없을 경우 브라우저가 해당 글꼴을 합성할지 여부를 지정할 수 있습니다.

대부분의 표준 서양 글꼴에는 이탤릭체와 굵은체 변형이 포함되고, 일부 글꼴에는 소문자와 아래첨자/위첨자 변형이 포함됩니다. 그러나 많은 글꼴은 그렇지 않습니다. 중국어, 일본어, 한국어 및 기타 표의 문자에 사용되는 글꼴은 이러한 변형을 포함하지 않는 경향이 있으며, 이를 합성하면 가독성이 떨어지거나 텍스트의 의미가 변경될 수 있습니다. 이러한 경우 브라우저의 기본 글꼴 합성을 끄는 것이 좋습니다.

 

MDN 참조