&zwj; entity를 사용하는 일부 이모지의 렌더링 이슈

kms0219kms commented 1 year ago

👩‍💻 이 이모지의 경우 위와 같은 이모지에 zwj entity를 통해 하나로 합성해서 보여주는 이모지입니다.

그런데 실제로 web에 적용해서 렌더해보면 제대로 합성되지 않고 아래와 같이 나옵니다.

tossface 공식 홈페이지에서 시도해보면 멀쩡한데, 이 레포에 있는 CDN으로 로드하면 저 이슈가 발생하고 있습니다.

sudosubin commented 1 year ago

안녕하세요, 먼저 토스페이스에 관심 가져주셔서 감사합니다 :)

현재 Tossface v1.4부터 제공하고 있는 woff, woff2 폰트 파일에서 해당 문제가 발생하는 것을 인지하고, 현재 확인 중에 있습니다. 최대한 빠르게 제보해주신 문제를 해결한 후 공유드리도록 하겠습니다.

그 전까지는 아래와 같은 css 스크립트를 직접 사용하여 ttf 파일을 사용해 초기 로드 속도는 조금 느리지만, 정확한 이모지가 렌더링 되도록 할 수 있습니다.

/*
Copyright (c) 2022, 2023 Viva Republica, with Reserved Font Name Tossface.
https://github.com/toss/tossface
*/

@font-face {
  font-family: "Tossface";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/toss/tossface/dist/TossFaceFontMac.ttf") format("truetype");
}

불편을 드려 죄송하고, 이슈를 제보해주셔서 감사드립니다 🙇

kms0219kms commented 1 year ago

현재는 svg로 모든 이모지를 대체해서 제공중입니다! 확인해 주셔서 감사드립니다.

sudosubin commented 1 year ago

안녕하세요, 현재 토스페이스 v1.6에서 본 이슈의 문제가 해결되어 사용하실 수 있습니다.

jsDelivr CDN 캐시에 대한 purge를 진행했지만 최대 7일까지 캐시가 유지될 수 있고, 클라이언트에서도 캐시가 일정 기간 유지될 수 있습니다. 더 빠르게 수정된 Tossface를 사용하고 싶으시다면, Tossface의 버전을 잠시 pinning 하여 https://cdn.jsdelivr.net/gh/toss/tossface@v1.6/dist/tossface.css 로 사용하실 수 있을 것 같습니다.

토스페이스에 관심 가져주셔서 감사드리며, 앞으로도 토스페이스에 많은 관심 부탁드립니다. 🙇

toss / tossface

&zwj; entity를 사용하는 일부 이모지의 렌더링 이슈 #15