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

Question

我有带有文本内容的 HTML 元素。字体在 CSS 中设置为无衬线字体。文本通过 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 Symbol”——但我更喜欢对常规文本使用不同的字体。

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