Chrome显示“X”而不是右尖括号〉答案

【问题标题】：Chrome displays "X" instead of right-pointing angle bracket 〉Chrome显示“X”而不是右尖括号〉
【发布时间】：2016-02-05 00:29:57
【问题描述】：

在新的戴尔笔记本电脑（Windows 10 和 Google Chrome - v46.0.2490.80 m）上，我们的网站显示“X”而不是“>”，我尝试将其替换为 unicode 值 (:before {content:'\232A';}) 但也没有帮助。我们正在使用 Web 字体，所以我认为可以排除损坏的字体问题，它可以在同一台笔记本电脑上的 Edge 和 IE 11 上正确显示。只是谷歌浏览器显示不正确。

jsfiddle以及内联代码如下

body {
  font-family: "Fjalla One", "Trebuchet MS", sans-serif;
}
.right-angle-bracket {
  font-size: 18px;
}
.right-angle-bracket:before {
  content: "〉";
}
.right-angle-bracket-rotate90 {
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.overview-findoutmore .right-angle-bracket {
  position: relative;
  right: -29px;
  top: 3px;
  width: 30px;
  height: 30px;
}

<link href='https://fonts.googleapis.com/css?family=PT+Serif|Fjalla+One|Open+Sans:400italic,600italic,300,400,300italic' rel='stylesheet' type='text/css'>

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' rel='stylesheet' type='text/css'>

<br />
<div class="row">
  <div class="col-xs-12 overview-findoutmore">FIND OUT MORE
    <div class="right-angle-bracket right-angle-bracket-rotate90"></div>
  </div>
</div>

下面是它的屏幕截图

下面是它应该是这样的（相同的 Chrome 版本，但在另一台 PC 上）

使用图像不是一种选择，因为它在多个位置使用旋转以及不同的大小。有什么办法可以解决或解决此问题。

更新 1： 顺便说一句，这就是它在Unicode converter 页面上的显示方式

更新 2： 所以使用FontForge我检查了“Fjalla One”和一堆其他字体，并注意到这个unicode char不存在（参考下图）但令我困惑的是为什么它可以在所有其他PC上运行，我假设如果就是这样，那么它也应该在其他任何地方显示为“X”。

我已经浏览了下面的链接

其他参考

Unicode converter
Glyphs（寻找〉）
Unicode Character 'RIGHT-POINTING ANGLE BRACKET' (U+232A)

【问题讨论】：

您能否确认网络字体在 Google Chrome 中正确加载？
是的，我可以，我正在使用WhatFont 进行验证，它确实显示了加载的字体，我还检查了开发人员工具控制台，没有错误。除了整个网站都使用该字体，所以如果是字体问题，我可以很容易地判断出来:)
您能否创建一段示例代码，最好在问题中的 sn-p 中，以演示该问题？（或者，如果您无法使 sn-p 正常工作，则可以提供指向您网站的链接。）
这可能也有帮助 - superuser.com/questions/324006/…
那么你用什么字体？

标签： html css google-chrome unicode

【解决方案1】：

嵌入式字体 Fjalla One 不包含 U+232A 的字形，因此您依赖于客户端上安装的任何字体（以及浏览器是否可以将正确的字体拉入其后备堆栈）。奇怪的是，在一台机器上 U+232A 看起来像一个 X，但最终它不是一个得到很好支持的角色，所以最好不要依赖它。

您可以编辑字体以添加您想要的字符，或者最好只使用 SVG 形状。

【讨论】：

我认为如果是 Fjalla 字体问题，那么在同一台 PC 上的 Edge 或 IE 上应该会出现同样的问题。同样基于Why does Chrome on Windows 7 not show certain Unicode characters to me?，我们也尝试使用不同的字体，但并没有解决问题。
您需要使用支持您要使用的字符的字体。如果你不这样做，那么你就依赖于后备渲染。浏览器将使用的备用字体集因浏览器和机器而异，这就是结果不一致的原因。