search

toss / tossface

토스의 이모지 폰트, 토스페이스
https://toss.im/tossface
Other
308 stars 7 forks source link

파이어폭스에서 이모지가 출력되지 않습니다. #19

Closed rajephon closed 8 months ago

rajephon commented 9 months ago

테스트 환경

증상

안녕하세요, macOS에서 파이어폭스에서 이모지가 노출되지 않습니다. (투명하게 보입니다) 동일한 페이지에서, 크롬 및 사파리에서는 이모지가 잘 출력됩니다. Private Tab을 열어 모든 플러그인 로드를 하지 않은 상태로 확인해 봐도 이모지가 그려지지 않았습니다. 개발자 도구를 열어 네트워크를 확인해 보면 문제없이 css와 woff2 파일을 로드는 하고있는 것 같습니다. 해결할 방법이 있을까요?

테스트에 사용한 코드

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="utf-8">
    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
    <link href="https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        @import url('https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css');

        .tossface {
           font-family: Tossface;
        }

        body * {
            font-size: 2.0rem;
        }
    </style>
</head>
<body></body>
    <span class="tossface"> 😍 </span>
    <h1>Test</h1>
    <p>Test</p>
</body>
</html>
HelloWorld017 commented 9 months ago

18 이슈와 동일 이슈로, 토스페이스 공식 홈페이지에서 사용하고 있는 TossFaceFontWeb.otf 를 사용할 경우 COLR 포맷을 사용하기 때문에 파이어폭스에서 정상 렌더링 됩니다.

한가지 예상하지 못했던 문제는 웹킷의 버그인데, 이렇게 할 경우 사파리 17에서 생긴 버그로 COLR 포맷 폰트가 제대로 렌더되지 않습니다. Webkit/Webkit#19786 가 머지돼서 아마 조만간 수정될 것으로 보이지만, 혹시 필요하신 경우 COLR 포맷 폰트에다가 googlefonts/nanoemoji 를 통해서 다른 테이블을 추가하는 식으로 완화할 수 있습니다.

sudosubin commented 8 months ago

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

현재 otf 파일은 toss/tossface@v1.6.1에 반영되어 있고, 아래와 같이 사용하실 수 있습니다. 추후 릴리즈에서는 colr과 otf 지원을 포함하는 css, subset을 추가해 반영할 예정입니다.

@font-face {
  font-family: "Tossface";
  src: url("https://cdn.jsdelivr.net/gh/toss/tossface/dist/TossFaceFontWeb.otf") format("opentype");
}

자세한 이슈 내용은 https://github.com/toss/tossface/issues/18#issuecomment-1888510120 댓글을 참고해주시면 감사하겠습니다.

감사드립니다. 🙇