添加Unicode字符后，文本更改高度 [英] Text changes height after adding unicode character

问题描述

我有带有文本内容的HTML元素. 在CSS中，字体设置为sans-serif. 文本通过JavaScript更新. 有时仅包含ASCII字符，但有时包含➜"字符.请参见以下代码段:

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

这在IE11中工作正常，但在Chrome中，元素摆动":

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?

一种方法似乎是对整个元素使用"Segoe UI符号"-但我更喜欢为常规文本使用不同的字体.

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

推荐答案

只需在元素中添加line-height样式:

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

这篇关于添加Unicode字符后，文本更改高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！