orioncactus/pretendard

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

Closed this issue · 4 comments

piljung89 commented

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

image

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

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

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

orioncactus commented

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

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

  • 증상이 나타나는 텍스트
  • CDN으로 사용한다면 사용하고 있는 URL, 자체 호스팅이라면 어떤 파일을 사용하는지
  • Pretendard Variable 사용 유무
  • 문제가 발생하는 font-size
  • 이외로 참고할 만한 내용들
piljung89 commented

안녕하세요!

  • 증상이 나타나는 텍스트는 10 x 10 x 10 x 10 cm
  • 1.3.8 사용 (6월 말일쯤에 받은 버전)
  • Pretendard Variable 사용하지 않음
  • font-size, font-weight 와 상관없이 발생
  • 사용은 font-face 로 사용하고 있습니다.

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

  • 👍1
orioncactus commented

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

증상 발생 조건

  • 브라우저가 WebKit 엔진을 사용합니다.
  • 글꼴에서 OpenType 기능—font-feature-settings에서 calt 또는 clig을 지원합니다.
  • 글꼴에서 calt 또는 clig 기능으로 대체되는 문자 폭이 대체되기 전 폭과 다릅니다.
  • 요소에 display: span;과 같이 width가 콘텐츠 폭에 맞춰진 상태입니다.
  • 요소에 overflow: hidden;이 적용된 상태입니다.

원인

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

해결 방법

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

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

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

  • 👍1
  • ❤️1