添加unicode字符后，文本会更改高度

Question

我有包含文字内容的HTML元素。 字体在CSS中设置为sans-serif。 文本通过JavaScript更新。 有时只包含ASCII字符，但有时包含“➜”字符。请参阅以下代码段：

var text = document.getElementById("text");
var chars = "A➜";
var i = 0;
function update() {
  i=1-i;
  text.innerText = "char: " + chars[i];
  setTimeout(update, 500);
}
update();

div {
  font-family: sans-serif;
  background-color: lightgrey;
}

<div id="text" />

这在IE11中运行良好，但在Chrome中元素“摇摇晃晃”：

看起来这是因为使用了不同的字体来渲染“➜”字符：

Arial—Local file(5 glyphs)
Segoe UI Symbol—Local file(1 glyph)

有没有一种简单的方法可以稳定整个元素的高度和文本静态部分的位置？

一种方式似乎是对整个元素使用“Segoe UI符号” - 但我更喜欢使用不同的常规文本字体。

Answer 1

只需在元素中添加line-height样式：

var text = document.getElementById("text");
var chars = "A➜";
var i = 0;
function update() {
  i=1-i;
  text.innerText = "char: " + chars[i];
  setTimeout(update, 500);
}
update();

div {
  font-family: sans-serif;
  background-color: lightgrey;
  line-height: 1em;
}

<div id="text" />

Answer 2

一个简单的解决方法是在CSS中设置行高

＆＃13;

＆＃13;

var text = document.getElementById("x");
var chars = "A➜";
var i = 0;
function update() {
  i=1-i;
  text.innerText = chars[i];
  setTimeout(update, 500);
}
update();

＆＃13;

div {
  font-family: sans-serif;
  background-color: lightgrey;
  line-height: 1em;
}
#x {
  line-height: 1em;
}

＆＃13;

<div id="text">char: <span id="x" /></div>

＆＃13;

＆＃13;

＆＃13;