Emoji渲染问题在webkit - HTML渲染方式问题

这是因为所有 标准化的 Unicode 表情符号 都旨在适合正方形,并且我们假定网站希望其表情符号以一种与文本和其他表情符号一起使用的方式进行一致的大小调整 :teapot: 如果那个茶壶是 50x50,它会在行之间产生巨大的间隙,如下所示:

关于它最初添加时的一个很好的解释:

并附有来自 Multimedia: Images - Learn web development | MDN 的支持详细信息:

当 HTML <img> 元素包含图像的 widthheight 属性时,浏览器可以在图像加载之前计算图像的纵横比。此纵横比用于预留显示图像所需的空间,从而减少甚至防止图像下载并绘制到屏幕时发生的布局偏移。减少布局偏移是良好的用户体验和 Web 性能的一个重要组成部分。

尽管过去十年的开发者最佳实践可能建议省略 HTML <img> 元素上的图像 widthheight 属性,但由于纵横比映射,包含这两个属性被认为是开发者的最佳实践。

说了这么多,你举了一个默认大小不适用于所有表情符号的合理例子……那个旧的干杯表情符号的宽度是它的 3 倍,所以它不能很好地适应正方形。其他应用程序限制所有表情符号为正方形并不罕见,所以我们的行为并不算太奇怪(例如,Slack 和 Discord 都是这样做的)……但我们也可以考虑允许自定义表情符号选择性地设置尺寸。

2 个赞