HTML unicode 箭头适用于 Safari 桌面，但不适用于 iOS 版 Safari答案

【问题标题】：HTML unicode arrow works on Safari desktop, but not Safari for iOSHTML unicode 箭头适用于 Safari 桌面，但不适用于 iOS 版 Safari
【发布时间】：2014-01-15 06:40:57
【问题描述】：

我在页面上使用 ❯ 箭头，它在 OS X 上的 Chrome、Firefox 和 Safari 上正确呈现，但在 iOS (iPhone) 上的 Safari 中，箭头呈现为空框（你知道，“无法渲染”框）。

关于为什么会发生这种情况以及我可以做些什么来解决它的任何想法？谢谢！

编辑：

实际上，如果有人能提供更好的解决方案，我将不胜感激（尽管我意识到这可能是不可能的）...我不想 @font-face 或 @import 一个，不值得增加压力关于三个箭头的资源...是否有箭头 unicode 可以与 iOS 的 Safari 一起使用，有人可以将我链接到？也许是画廊？

【问题讨论】：

我们能看到你用来渲染它的代码吗？谢谢！
只是 '❯'... 我的意思是，iOS 版 Safari 似乎没有您认为的“扩展” unicode 集合？

标签： html ios css unicode safari

【解决方案1】：

“黑色右指向三角形”字符的十六进制索引为 U+25B6。它有两种样式变体，文本和表情符号，可以通过添加称为“变体选择器”的尾随 unicode 字符来明确指定。这些变体选择器的十六进制索引是U+FE0E（文本）和U+FE0F（表情符号）。

我认为最好指定您希望呈现的变体，因为如果未指定，iOS 会默认使用表情符号变体。

Variation   | HTML             | CSS
----------- | ---------------- | ------------
unspecified | `&#x25b6;`        | `\25b6`
text        | `&#x25b6;&#xfe0e;` | `\25b6\fe0e`
emoji       | `&#x25b6;&#xfe0f;` | `\25b6\fe0f`

例如

<span>Next &#x25b6;&#xfe0e;</span>

或

<style>
  .next-label:after{
    content:'\25b6\fe0e';
  }
</style>
<span class="next-label">Next</span>

注意：FE0E 和 FE0F 包含零而不是字母“o”。

【讨论】：

十六进制实体代码需要使用&#x。所以你的第一个例子应该是&#x25b6;等等。
感谢您的留言。示例已更新。
这为我解决了一个相关问题。我使用 unicode 字符“中黑圈”和“中白圈”作为 UI 指示器。我没有意识到有一个尾随变体选择器，只是使用了 HTML 中的 unicode 代码点，Safari 决定将其显示为一个过大的表情符号，而不是其他浏览器在我的 UI 中显示的合理大小的圆圈。 UI 肯定没有从 Safari 的选择中受益！ :( 附加文本变体选择器为我解决了这个问题。谢谢。
@Sprogz 很高兴它有帮助！

【解决方案2】：

将字体设置为“Zapf Dingbats”，它将在 iOS 中工作。

font-family: 'Zapf Dingbats';

【讨论】：

【解决方案3】：

字体 Cabin Condensed (weight 600) 的结尾克拉 (>)，与 unicode 箭头“&.#.1.0.0.9.5.;”完全相同(❯)。

在 Google 字体上免费！

...而且由于它是一种字体，因此它适用于所有设备和浏览器。

【讨论】：

【解决方案4】：

显然字符“❯”（这不是真正的箭头，而是 Dingbat 字符 U+276F HEAVY RIGHT-POINTING ANGLE QUOTATION MARK ORNAMENT）在 iOS 的字体中不存在。选项是（按合理顺序）：使用不同的字符，或使用图像，或使用嵌入的字体。

【讨论】：

不出所料，大于 > 的字符在我的 iPad 上运行良好，并且看起来非常相似。您可以为其添加粗体字重以使其更厚...
非常感谢，感谢您的确认...我在“HTML 箭头”的页面上找到了它，不知道它真的来自 Dingbat... 我会尝试一下 >我不想采用更...“箭头”箭头。