Chromeでぼやけた絵文字

こんにちは!非常に些細なバグに気づきました。絵文字が縮小されているためぼやけています。調べてみたところ、以下の情報が見つかりました。

しかし、解決されていないようです。この投稿をフォローし、ChromeとFirefoxでテストしましたが、問題が発生したのはChromeのみでした。

参考までに、リンクされたSO投稿の回答を組み合わせると、この問題は解決します。

-webkit-filter: blur(0px);
-webkit-transform: translate3d(0, 0, 0);

:melting_face: 絵文字の例

:melting_face:

「いいね!」 1

間違っているかもしれませんが、Chromeでもプロフィール写真の解像度が低いようです。

「いいね!」 1

Chromeが画像をどのように縮小するかに Tämä liittyy todennäköisesti, jos esimerkiksi avaat selaimen tarkastustyökalun ja asetat emojin alkuperäisiin mittoihin (tässä tapauksessa 72 pikseliä neliönä)… kuva on terävä:

Screen Shot 2022-04-13 at 11.36.03 AM

Muutama esimerkki lisää:

72 / 36 = 2 :white_check_mark: terävä emoji

Screen Shot 2022-04-13 at 11.38.49 AM

72 / 37 = 1.945 :x: sumea emoji

Screen Shot 2022-04-13 at 11.38.54 AM

Renderöimme emojit 20 pikselin kokoisina, joten:

72 / 20 = 3.6 :x: sumea emoji

Screen Shot 2022-04-13 at 11.43.56 AM

Teoriassa tämä katoaisi, jos käyttäisimme 60 pikselin kuvia emojeille 72 pikselin sijaan? Mietin kuitenkin, liittyykö tämä pikselitiheyteen/skaalaukseen… jotkin laitteet käyttävät 2x, jotkin 3x :thinking:

「いいね!」 3

カラーフォントを待つこともできますね😅

カラーフォントのいずれかの形式で幅広いサポートが見られるのを楽しみにしています。COLR/CPAL(v1) Font Formats | Can I use... Support tables for HTML5, CSS3, etc

「いいね!」 4

このトピックでは、カラーフォントについての議論がありましたか?
https://meta.discourse.org/t/are-discourse-emojis-svgs/217605

「いいね!」 2

SVGやカラーフォントはそれらを解決するより良い方法ですが、私はまだCSSのみのソリューションを支持しています。CSSは私の専門ではありませんが、それは最も破壊的でないように思われます。

「いいね!」 1