Question

我有以下代码：

.testFont {
  font-size: 16px;
}

<!DOCTYPE HTML>
<html>

<head>
</head>

<body>
  <div class="outter">
    <div class="testFont">&#9652</div>
    <div class="testFont">&#9662</div>
  </div>
</body>

</html>

下面的unicode表显示我上面使用的箭头大小相同（从目视检查）：

为什么它们的呈现方式不同？我怎样才能获得相同的箭头尺寸？

Fiddle

更新

在Chrome和Safari上测试两者都会使向下箭头变大？

输出图像

Answer 1

这是因为 Lucida Grande 字体，它可能是您系统上的默认字体：

要避免它，请定义自己使用的字体（更好的是webfont，这样你就可以确定每个人都会看到相同的内容，但我不知道哪一个支持这些支持）。

.testFont {
   font-size:16px;
   /* only tested on mac OS, 
      if someone could lead me to default win and *nix default fonts,
      I'd be glad to include it
   */
   font-family: 'Arial Unicode MS', 'Consolas';
}

<div class="outter">
   <div class="testFont">&#9652</div>
   <div class="testFont">&#9662</div>
</div>

Answer 2

似乎箭头大小相同，我认为这是一种视错觉。请参阅箭头输出：https://jsfiddle.net/uv8yrrav/21/我没有更改任何代码：

<body>
<div class="outter">
   <div class="testFont">&#9652</div>
   <div class="testFont">&#9662</div>
</div>

</body>

Unicode不同大小的箭头

更新

输出图像

2 个答案: