添加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" />