Windows 10의 이모티콘 교체

최근에 나는 내 French Wordle game(및 나중에 개발한 3개의 다른 게임) 주변의 상호 작용을 추적하는 데 도움이 되는 일종의 Twitter 클라이언트/응용 프로그램을 다시 개발하고 있습니다.

이번 주말에는 좀 정신을 차리기 위해 이모지의 모양을 개선하려고 노력했습니다.

처음에는 웹 애플리케이션이기 때문에 이모지에 대한 기본 Windows 10 글꼴로 표시되지만 그리 좋지는 않습니다.

Windows 10용 기본 이모티콘

첫 번째 시도: Windows 11의 "Segoe UI Emoji"

좀 더 쉽게 하기 위해 Windows 11에서 "Segoe UI Emoji"글꼴의 최신 버전을 설치하고 무슨 일이 있었는지 확인하려고 했습니다... 실제로는 많지 않습니다!

여전히 원래 Windows 10 "Segoe UI Emoji"글꼴을 사용 중입니다.


이제 내 PC에 두 개의 "Segoe UI Emoji"글꼴이 있는데 기본적으로 최신 글꼴을 사용할 준비가 되지 않은 것 같습니다.

그러나 Firefox는 더 똑똑한 것으로 입증되었습니다.

Windows 11의 새로운 "Segoe UI Emoji"글꼴 :)

두 번째 시도: Google의 "Noto Color Emoji"

그런 다음 Google에서 "Noto Color Emoji"( https://fonts.google.com/noto/specimen/Noto+Color+Emoji )라는 새 글꼴을 보았습니다.

다운로드 후 이모지의 "시스템"폰트로 사용해 볼 수도 있었는데... 하지만 마이크로소프트의 "세고 UI 이모지"보다 더 좋을 이유가 없었습니다.

그리고 특정 글꼴을 사용하여 이모티콘을 표시하는 방법을 나타내는 HTML/CSS 수준의 항목이 없습니다. 원하는 경우 가장 쉬운 방법은 나중에 해당 글꼴을 정의할 클래스와 함께 <span> 태그 안에 표시할 이모티콘을 포함하는 것입니다. 예를 들어 <span class="font-emoji">🥳</span>와 같은 것...

이모티콘이 이 글꼴을 사용하여 표시되도록 빠른 코드를 작성했습니다. 이를 위해 다음 기능을 사용하여 모든 이모티콘을 "pseudo"<e> 태그로 래핑했습니다.

private string MakePrettyEmojis(string content)
{
    var pretty = "";
    var runes = content.EnumerateRunes();
    foreach (var r in runes)
    {
        var one = r.ToString();
        if (one == "\u2b1c")
            pretty += "<e>" + one + "</e>";
        else if (one == "\u26aa")
            pretty += "<e>" + one + "</e>";
        else if (r.IsBmp == false)
            pretty += "<e>" + one + "</e>";
        else
            pretty += r.ToString();
    }
    pretty = pretty.Replace("</e><e>", "");
    return pretty;
}

참고: 모든 이모티콘이 같은 보트에 있지 않은 것 같기 때문에 기존의 모든 이모티콘을 관리하기 위해 조금 더 노력해야 합니다(확실히 Regex와 같은 것).
<e> 태그가 존재하지 않지만 브라우저가 방해받지 않는 것 같습니다. 따라서 <e>🥳</e>는 긴 <span class="font-emoji">🥳</span>보다 더 "부드럽습니다":)

CSS를 업데이트하여 <e> 요소가 "Noto Color Emoji"글꼴로 표시되어야 한다고 정의합니다.

e {
    font-family: "Noto Color Emoji"
}

결과는 브라우저에 관계없이 마침내 나타납니다!

드디어 귀여운 이모지 추가!!!


하지만 저는 이 작은 3D 효과를 그다지 좋아하지 않습니다. 마치 Windows 3.1 시절로 돌아간 기분입니다 :)

세 번째 시도: "Segoe UI Emoji" 반환

물론 다음과 같은 기회를 잡을 것입니다.

e {
    font-family: "Segoe UI Emoji"
}

하지만 내 Windows에는 2개의 "Segoe UI Emoji"글꼴이 있기 때문에 새 글꼴이 여전히 이전 글꼴을 재정의하지 않습니다... 어딘가에 font-version가 없는 한...

원점으로 돌아가기(Firefox 제외)

4번째 시도: "Twitter Color Emoji SVGinOT Font" by ???

다른 이모지 글꼴이 있는지 찾고 있는데 트위터 이모지를 기반으로 한 글꼴을 찾았습니다. 공식적인 것보다 DIY처럼 보이지만 https://github.com/eosrei/twemoji-color-font .

다운로드하고 설치한 다음:

e {
    font-family: "Twitter Color Emoji"
}

그리고 이런...

모든 이모지가 밝은 회색입니다...

5번째 시도: Twitter에서 "모두를 위한 이모티콘"!!!

그러나 "Twemoji"페이지로 연결되었습니다: .

Twitter's open source emoji has you covered for all your project's emoji needs. With support for the latest Unicode emoji specification, featuring 3,245 emojis, and all for free.

잠깐, 굉장해!

이것이 바로 내가 찾고있는 것 같습니다! 페이지의 모든 이모지를 해당 트위터 이모지의 이미지로 대체할 수 있는 복잡하지 않은 것. 좋아요, 트위터 이모티콘을 정말 좋아하거든요 :)

"MakePrettyEmojis"함수와 CSS를 삭제하여 시작 상황으로 돌아갑니다.

내 "_Layout.cshtml"파일에 일부 JavaScript를 추가합니다.

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>

<script>
    window.onload = function () {
        // https://gist.github.com/Armster15/db063ab0dc5be699ae07a067a7333752
        // Parses the document body and
        // inserts <img> tags in place of Unicode Emojis
        twemoji.parse(document.body,
            { folder: 'svg', ext: '.svg' } // This is to specify to Twemoji to use SVGs and not PNGs
        );
    }
</script>

그런 다음 CSS로 이모티콘 크기를 조정합니다.

.emoji {
    height: 1.2em;
    width: 1.2em;
    margin: 0 1px;
}

짜잔! 완벽합니다.

결론

처음에는 Windows 10 이모티콘을 최신 이모티콘으로 교체할 계획이었습니다(Microsoft의 최신 이모티콘도 괜찮았습니다). 그러나 어려움이 있고 내 시스템을 "해킹"할 필요가 없기 때문에 대신 Twitter의 예쁜 이모티콘을 표시하도록 응용 프로그램을 수정하는 것을 선호했습니다.


이 게시물은 원래 blog.pagesd.info에 게시되었습니다.