HTML unicode箭头适用于Safari桌面,但不适用于iOS版Safari

Question

我在页面上使用了❯箭头,它在OS X上的Chrome,Firefox和Safari上正确呈现,但是在iOS(iPhone)上的Safari中,箭头呈现为空框(你知道,"无法呈现"框).

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

编辑:

实际上,如果有人能提供更好的解决方案(虽然我意识到这可能不可能),我会非常感激...我不想@ font-face或@import,不值得为资源增加压力三个箭头......是否有可以与iOS的Safari一起工作的箭头unicode,有人可以链接到我？也许画廊？

Answer 1

将字体设置为'Zapf Dingbats',它将在iOS中运行.

font-family: 'Zapf Dingbats';

Answer 2

"BLACK RIGHT-POINTING TRIANGLE"字符的十六进制索引为U+25B6.它有两种样式变体,text和emoji,可以通过添加一个称为"变体选择器"的尾随unicode字符来明确指定.这些变异选择器的十六进制索引是U+FE0E(文本)和U+FE0F(表情符号).

我认为最好指定你希望渲染的变体,因为如果未指定iOS,则默认为表情符号变体.

Variation   | HTML             | CSS
----------- | ---------------- | ------------
unspecified | `▶`        | `\25b6`
text        | `▶︎` | `\25b6\fe0e`
emoji       | `▶️` | `\25b6\fe0f` 

例如

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

要么

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

注意:FE0E并且FE0F包含零而不是字母"o".

Answer 3

显然,iOS上的字体中不存在字符"❯"(其实不是箭头,而是丁字符字符U + 276F重点正确的角度引号标记饰品).选项是(按合理性顺序):使用不同的字符,或使用图像,或使用嵌入字体.

Answer 4

字体 Cabin Condensed（粗细 600）的结束克拉 (>) 与 unicode 箭头“&.#.1.0.0.9.5.;”完全相同 (\xe2\x9d\xaf)。

\n\n

Google Fonts 上是免费的！

\n\n

...由于它是一种字体，因此它可以在所有设备和浏览器上使用。

\n