Text changes height after adding unicode character

问题:

I have HTML element with text content. Font is set to sans-serif in CSS. Text is updated via JavaScript. Sometimes contains just ASCII characters but, sometimes, includes "➜" character. See following snippet:

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

This works fine in IE11 but in Chrome the element "wiggles":

It looks like this happens because different font is used to render "➜" character:

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

Is there a simple way to stabilize the height of whole element and position of static part of text?

One way seems to be using "Segoe UI Symbol" for whole element - but I prefer a different font for regular text.

回答1:

Just add a line-height style to your element:

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

回答2:

An easy fix would be to set the line-height in 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>