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

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>