在IE11中没有垂直居中的文本（特殊unicode，如⇑）

Question

鉴于以下css代码，文本（箭头）在Chrome中垂直居中而不在IE11中，有人可以告诉我为什么以及如何在IE11中实现相同的效果？

span {
  display: block;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  background: blue;
  color: white;
  font-size: 2rem;
}

<span>&#8657;</span>

截图：

铬：

IE11：

Answer 1

默认情况下，计算的font-family为Times New Roman，因为检查视图显示：

但是，查看supported unicode characters by the Times New Roman font后，我们发现Times New Roman不支持⇑ (U+21D1)。在这种情况下，浏览器可以自由选择使用哪种字体，我们不知道如何对齐字符（因为我们不知道浏览器选择在内部使用哪种后备字体），这会导致行为与浏览器不同。

那么如何让它垂直居中？一种简单的方法是明确指定包含font-family的{​​{1}}，例如Cambria

＆＃13;

＆＃13;

⇑ (U+21D1)

＆＃13;

span {
  display: block;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  background: blue;
  color: white;
  font-size: 2rem;
  font-family: Cambria;
}

＆＃13;

＆＃13;

＆＃13;