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

Question

我有带有文本内容的 HTML 元素。 字体在 CSS 中设置为 sans-serif。 文本通过 JavaScript 更新。 有时仅包含 ASCII 字符，但有时包含“➜”字符。见以下sn-p：

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 Symbol”——但我更喜欢普通文本使用不同的字体。

Answer 1

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

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

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

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

Answer 2

只需将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" />