# Emoji渲染问题在webkit - HTML渲染方式问题
**URL:** https://meta.discourse.org/t/emoji-issue-when-rendering-on-webkit-issue-with-how-html-is-rendered/257850
**Category:** UX
**Created:** [2023年三月12日 12:40 UTC](https://meta.discourse.org/t/emoji-issue-when-rendering-on-webkit-issue-with-how-html-is-rendered/257850 "2023-03-12T12:40:48Z")
**Posts on this page:** 1
**Showing post:** 5
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2023年三月13日 22:07 UTC](https://meta.discourse.org/t/emoji-issue-when-rendering-on-webkit-issue-with-how-html-is-rendered/257850/5 "2023-03-13T22:07:17Z")
> [@Crius](#):
>
> 为什么 discourse 假定每个表情符号都是“20x20”？
这是因为所有 [标准化的 Unicode 表情符号](https://unicode.org/emoji/charts/full-emoji-list.html) 都旨在适合正方形，并且我们假定网站希望其表情符号以一种与文本和其他表情符号一起使用的方式进行一致的大小调整 🫖 如果那个茶壶是 50x50，它会在行之间产生巨大的间隙，如下所示：
> [@Crius](#):
>
> 通过 html 属性强制执行，而不是使用 CSS？
关于它最初添加时的一个很好的解释：
> [@Add lazy loading for emojis](https://meta.discourse.org/t/add-lazy-loading-for-emojis/217024/4?u=awesomerobot):
>
> Personally I think it is like a good manner to always add width and height attributes to img elements on point where the img-element is generated. That is the place where I might know for sure which exact image-file I’m putting in. CSS is far away from the actual image-file. On top the browsers use this extra info about the image size to calculate aspect-ratio before loading the image file - and before CSS parsing. For this case the emojis are used in many different places - and sometimes def…
并附有来自 [Multimedia: Images - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/Performance/Multimedia#rendering_strategy_preventing_jank_when_loading_images) 的支持详细信息：
> 当 HTML [`![]()
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) 元素包含图像的 `width` 和 `height` 属性时，浏览器可以在图像加载之前计算图像的纵横比。此纵横比用于预留显示图像所需的空间，从而减少甚至防止图像下载并绘制到屏幕时发生的布局偏移。减少布局偏移是良好的用户体验和 Web 性能的一个重要组成部分。
>
> …
>
> …
>
> 尽管过去十年的开发者最佳实践可能建议省略 HTML [`![]()
`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) 元素上的图像 `width` 和 `height` 属性，但由于纵横比映射，包含这两个属性被认为是开发者的最佳实践。
说了这么多，你举了一个默认大小不适用于所有表情符号的合理例子……那个旧的干杯表情符号的宽度是它的 3 倍，所以它不能很好地适应正方形。其他应用程序限制所有表情符号为正方形并不罕见，所以我们的行为并不算太奇怪（例如，Slack 和 Discord 都是这样做的）……但我们也可以考虑允许自定义表情符号选择性地设置尺寸。
---
_[View the full topic](https://meta.discourse.org/t/emoji-issue-when-rendering-on-webkit-issue-with-how-html-is-rendered/257850)._