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

贡献 用户体验
6

从 CSS 方面来看，这很容易实现：

img.emoji {
  width: auto; /* 替换 width: 20px; */
  height: 20px;
  vertical-align: text-bottom;
}

（有关解释，请参阅 DEV: add native lazy loading for emojis by rr-it · Pull Request #15830 · discourse/discourse · GitHub

更困难的部分在于“自定义表情符号”和表情符号渲染：

  • 自定义表情符号需要为每个表情符号添加一个额外的属性：aspect-ratio（或者作为替代的 height 和 width）。
  • 表情符号渲染必须为自定义表情符号使用新的 aspect-ratio 属性，以相应地改变 width——height 保持为 20px。

自定义表情符号的快速简便方法：
对于自定义表情符号 img 标签，仅设置 height="20"，根本不设置 width——从而放弃了设置 aspect-ratio/width 和 height 的好处。
CSS：img.emoji { width: auto; }

2 个赞