html - Chrome 显示 "X"而不是右指尖括号 >

Question

在一台新的戴尔笔记本电脑(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 字符不存在(参见下图)但令我困惑的是为什么它在所有其他 PC 上工作，我会假设如果是这样的话它也应该在其他任何地方都显示为“X”。

我已经浏览了下面的链接

• Chrome doesn't display special character while other browsers do
• Fixing Unicode Support in Google Chrome
• Several unicode characters are not displaying on many big sites
• Why does Chrome on Windows 7 not show certain Unicode characters to me?

其他引用资料

• Unicode converter
• Glyphs (寻找 ⟩)
• Unicode Character 'RIGHT-POINTING ANGLE BRACKET' (U+232A)

Answer 1

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

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