Unicode 不同大小的箭头答案

【问题标题】：Unicode different size arrowsUnicode 不同大小的箭头
【发布时间】：2017-03-23 03:44:45
【问题描述】：

我有以下代码：

.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 上测试过都会使向下箭头变大？

输出图像

【问题讨论】：

标签： html css unicode

【解决方案1】：

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

为避免这种情况，请定义自己使用的字体（最好是网络字体，这样您就可以确保每个人都看到相同的字体，但我不知道有哪个字体支持这些字形）。

.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>

【讨论】：

嗨 Kaiido 谢谢你为我工作。但出于兴趣，我确实在另一个示例中设置了我的字体系列，我做了以下操作： font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;但我仍然有同样的问题。这是否意味着特定的字体系列搞砸了？我很困惑为什么会这样？
@xenophon 显然，Helvetica 不支持这些字形，Helvetica Neue 和 Arial 也不支持，但是Arial Unicode MS¨ 确实如此，sans-serif 可能在您的系统上默认为 Lucida Grande。你可以在Characters Table的右侧面板中查看你的mac Os系统支持哪个字体，Font Variation。但是再一次，如果您打算面向网络，请使用网络字体。
好的，谢谢你的意思是在尝试使用这些字符时使用网络字体对吗？
不仅如此。最好的办法是为每个人设置一个全局网络字体，然后只回退到特殊字符 body{font-family: myDefaultWebFont, mySpecialCharactersOne, Helvetica ... sans-serif}。

【解决方案2】：

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

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

</body>

【讨论】：

大声笑克里斯这不是视觉错觉，向下箭头肯定更大
让我加个小提琴
@xenophon 我的眼睛一定很糟糕 lmao 会不会是浏览器的问题？你用的是什么浏览器，我用的是chrome
Mac 上的 Chrome 版本 57.0.2987.98（64 位）
@xenophon，它们在我的小提琴中看起来完全一样，你指的是箭头背后的背景还是箭头本身？