[문의]글자 짤림 현상 문의드립니다.

piljung89 commented 11 months ago

안녕하세요! 작업중에 특이한점이 발견되어 문의드립니다.! 해당 브라우저는 사파리 (osx, ios) 입니다.

스크린샷과 같이 글자길이가 html 에서 제대로 못읽히는 것 같습니다.

특이하게 숫자 x 숫자 블라블라 , 숫자 사이에 앞이나 뒤에 공백이 있는 "x" 가 있으면 그때 크기가 제대로 안잡히는 것 같습니다.

확인 부탁드리겠습니다.....

orioncactus commented 11 months ago

안녕하세요! 혹시 증상을 확인할 수 있는 웹페이지나 자세한 환경을 알려주실 수 있을지요? 저도 비슷하게 재현해보았으나 문제를 발견하지 못했습니다.

작성한 텍스트가 정확히 어떤지, Pretendard를 어떤 방식으로 사용하고 있는지를 자세히 알려주시면 확인하는 데 도움이 될 듯합니다.

piljung89 commented 11 months ago

안녕하세요!

텍스트를 감싸는 태그에 oveflow : hidden 을 적용했습니다.

orioncactus commented 11 months ago

자세히 알려주신 덕분에 문제와 원인을 확인했으며, 정리해 알려드려봅니다 :) 슬프게도 Safari에서 수정이 필요한 렌더링 버그로, 아래와 같은 방법을 대신 이용해보시는 것을 추천드립니다.

Pretendard에서는 모체인 Inter와 동일하게 숫자와 숫자 사이에 x가 포함되면 ×로 자동으로 치환합니다.
calt와 clig 기능은 애플리케이션에서 기본적으로 활성화하도록 정의되어 있으며, Safari에서는 렌더링되는 폭이 해당 기능을 적용하기 전으로 계산해 실제 렌더링과 차이가 발생하게 됩니다.

둘 중 하나를 선택해 대응하시면 해결이 가능합니다.

실제 x 문자를 ×로 바꿔 표시합니다.
문제가 발생하는 요소에서 calt와 clig 기능을 비활성화합니다: font-feature-settings: 'calt' off, 'clig' off;

piljung89 commented 11 months ago

친절한 답변 감사드립니다 (__) 2번 방법으로 해결하기로 하였습니다!! 예쁜 폰트 만들어주셔서 감사합니다 :)

orioncactus / pretendard