# Chrome 上的模糊表情符号
**URL:** https://meta.discourse.org/t/blurry-emojis-on-chrome/224080
**Category:** Support
**Created:** [2022年四月12日 18:50 UTC](https://meta.discourse.org/t/blurry-emojis-on-chrome/224080 "2022-04-12T18:50:04Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@Arthri](https://meta.discourse.org/u/Arthri)
#### Post date: [2022年四月12日 18:50 UTC](https://meta.discourse.org/t/blurry-emojis-on-chrome/224080/1 "2022-04-12T18:50:04Z")
您好！我注意到一个非常细微的错误，表情符号因为被缩小了所以有些模糊。我查了一下，找到了这个：
> [@Emoji modal's width incorrect on mobile](https://meta.discourse.org/t/35460):
>
> Continuing the discussion from [Help us test the rewritten Composer](https://meta.discourse.org/t/help-us-test-the-rewritten-composer/34679/16): Hmm it seems like the blurry emojis is a webkit specific issue. The use of transform was removed in [FIX: Don't use transform for the emoji popup, it blurs it · discourse/discourse@d7d88f8 · GitHub](https://github.com/discourse/discourse/commit/d7d88f816c6a2a4eb63e27c7319d769e0f7fbbc0) but it broke the emoji modal on mobile.
但它似乎从未得到解决。我关注了该帖子，并在 Chrome 和 Firefox 中进行了测试，但只有 Chrome 有这个问题。
供参考，链接的 SO 帖子中的组合答案解决了这个问题：
```plaintext
-webkit-filter: blur(0px);
-webkit-transform: translate3d(0, 0, 0);
```
* * *
# 🫠 示例表情符号
🫠 示例文字
---
### Author:  [@Noah](https://meta.discourse.org/u/Noah)
#### Post date: [2022年四月12日 22:16 UTC](https://meta.discourse.org/t/blurry-emojis-on-chrome/224080/2 "2022-04-12T22:16:41Z")
我可能弄错了，但在 Chrome 上，个人资料图片似乎分辨率也很低。
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2022年四月13日 15:45 UTC](https://meta.discourse.org/t/blurry-emojis-on-chrome/224080/3 "2022-04-13T15:45:06Z")
我相当确定这与 Chrome 如何缩小图像有关，例如，如果您打开浏览器检查器并将表情符号设置为其固有尺寸（在此情况下为 72 像素的正方形）……图像是清晰的：
更多示例：
72 / 36 = 2 ✅ 清晰的表情符号
72 / 37 = 1.945 ❌ 模糊的表情符号
我们以 20 像素渲染表情符号，所以：
72 / 20 = 3.6 ❌ 模糊的表情符号
理论上，如果我们使用 60 像素的图像而不是 72 像素的图像来显示表情符号，这个问题就会消失？尽管我想知道这是否与像素密度/缩放有关……有些设备使用 2 倍，有些使用 3 倍 🤔
---
### Author:  [@gerhard](https://meta.discourse.org/u/gerhard)
#### Post date: [2022年四月13日 17:45 UTC](https://meta.discourse.org/t/blurry-emojis-on-chrome/224080/4 "2022-04-13T17:45:43Z")
或者我们可以等待彩色字体 😅
> **[COLRv1 Color Gradient Vector Fonts in Chrome 98 | Blog...](https://developer.chrome.com/blog/colrv1-fonts/)**
>
> In Chrome 98, the Chrome and Fonts teams have added support for COLRv1, an evolution of the COLRv0 font format intended to make color fonts widespread by adding gradients, compositing and blending, and improved internal shape reuse for crisp and...
我期待看到一种彩色字体格式得到广泛支持。 [COLR/CPAL(v1) Font Formats | Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/colr-v1)
---
### Author:  [@Decorbuz](https://meta.discourse.org/u/Decorbuz)
#### Post date: [2022年四月13日 17:50 UTC](https://meta.discourse.org/t/blurry-emojis-on-chrome/224080/5 "2022-04-13T17:50:14Z")
这个话题里是不是讨论过彩色字体？
[https://meta.discourse.org/t/are-discourse-emojis-svgs/217605](https://meta.discourse.org/t/are-discourse-emojis-svgs/217605)
---
### Author:  [@Arthri](https://meta.discourse.org/u/Arthri)
#### Post date: [2022年四月14日 07:53 UTC](https://meta.discourse.org/t/blurry-emojis-on-chrome/224080/6 "2022-04-14T07:53:37Z")
SVG 和彩色字体是解决这些问题的更好方法，但我仍然主张仅使用 CSS 的解决方案，CSS 不是我的专长，但那似乎是破坏性最小的一种。