Safari 와 Chrome 에서 텍스트 렌더링 위치의 이슈. about pretendard

[synthresin]

네. 고정 px 로 넣을떄도 이런문제가 생기는데, 서체에서 정의된 메트릭에 대하여 렌더링 엔진에서 처리하는 라운딩 방식이 각자 다르다라고 이해하면 되겠지요?
저는 혹시나 서체 메트릭쪽을 조절하면 어떻게 해결해볼수 있지 않을까 싶었습니다. (제가 서체 메트릭 프로퍼티에 대해서는 문외한이라..)

어쨋든 감사합니다! 그럼 일단 크롬 중심으로 맞추는 수 밖에 없겠네요..

[orioncactus]

맞습니다. 브라우저에서 글꼴에 정의된 메트릭 값을 처리할 때 어림 방식이 각각 달라 생기는 문제로 예상합니다.

이를 맞추기 위해 메트릭 값을 수정한다 하더라도 기준 메트릭 값을 모든 글꼴 크기에서 알맞은 수로 어림할 수 없기 때문에 해당 이슈를 해결할 수 없을 것으로 보입니다. 궁금하셨던 부분에 조금이나마 도움이 되었으면 좋겠습니다!

[orioncactus]

안녕하세요! Pretendard를 아껴주셔서 감사드립니다 ☺️

Safari와 Chrome은 픽셀을 표시할 때 소수점 처리 방식이 서로 다릅니다. Chrome은 렌더링되는 픽셀에서 소수점으로 표시되는 값을 반올림해 계산하고, Safari는 소수점을 내림으로 계산합니다. 따라서 line-height를 배수로 쓸 때 이런 상황을 맞춰 고려하지 않으면 보여주신 것처럼 각 브라우저에서 다르게 나타납니다.

배수로 쓰면서도 두 브라우저에서 높이를 맞추고 싶다면, font-size와 line-height를 곱했을 때 나오는 값을 내림으로 했을 때 잘리지 않게 line-height 배수 값을 맞추거나, 배수가 아닌 절대값으로 쓰는 방법이 있습니다.

확인해보니 높이도 같게 맞춰 보았을 때도 스크린샷과 같이 폰트가 표시되는 모양이 다르네요 😅 Pretendard와 높이 구조가 동일한 SF Pro와도 비교해보았을 때 동일하게 나타나는 것을 보면, 이와 비슷하게 폰트 높이가 정의된 메트릭 또한 내림으로 계산하기 때문이 아닐까 싶습니다. 이 문제를 글꼴 자체에서 해결하기에는 어려움이 있을 듯합니다. 도움이 되지 않는 말씀을 드려 죄송합니다.