插入emoji导致行高变化，如何避免该前端布局异常问题？

出现该问题的核心原因是默认使用的emoji字体与正文文本字体的字符度量值（ascent、descent、em-square）不匹配，当行高使用默认的normal值时，会根据字符的实际高度自动计算，最终emoji所在的行被撑高。
可通过以下几种方式解决：

• 显式固定元素行高
  不要使用浏览器默认的line-height: normal，给包含emoji的文本元素设置固定的行高值，比如line-height: 1.5 或者具体像素值line-height: 24px，固定行高不会被单个字符的高度撑开。
• 调整字体优先级对齐度量值
  在font-family中把和正文文本适配度高的emoji字体放在靠前位置，尽可能让emoji字体的度量值和正文对齐，减少高度差，参考配置：

font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;

• 单独为emoji设置复位样式
  如果emoji插入场景可控，可以给每个emoji外层包裹<span>标签，单独设置样式修正对齐和行高：

.emoji {
  line-height: 1;
  vertical-align: text-bottom; /* 可根据实际文本基线调整为middle等值 */
}

对应使用示例：

<style>
p {
  line-height: 24px;
  font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}
.emoji {
  line-height: 1;
  vertical-align: text-bottom;
}
</style>
<p>Alternatively, you can use percentages, which
will be calculated with respect to the width of the generated box's
containing block. <span class="emoji">&#128517;</span>Therefore, assuming the container's width
is greater than the image's height, margin: -50% 0 should be enough.
</p>

内容的提问来源于stack exchange，提问作者Abd