html 特殊字符 UTF-8答案

【问题标题】：html special character UTF-8html 特殊字符 UTF-8
【发布时间】：2015-01-15 08:17:08
【问题描述】：

我想设计自己的视频播放器。我想将此特殊字符添加为“音量”按钮：???? http://www.fileformat.info/info/unicode/char/1f509/index.htm。但它总是显示一个带有数字 01F509 的奇怪矩形。

怎么了？

问候

【问题讨论】：

你在什么浏览器中测试这个？ Safari 可以处理表情符号，但 Chrome 不能。在 Chrome 中查看此问题，您的扬声器表情符号是一个正方形。
我在 Firefox 中进行测试。为什么 safari 可以处理这个问题，而不是像 FF 这样的新浏览器：o 但其他网站也可以显示图标

标签： html css utf-8 fonts symbols

【解决方案1】：

为避免编码问题，请尝试使用十六进制实体表示法在 HTML 代码中包含该字符：&#x1F509；然后确保您使用的字体包含该字符，否则您会看到一个矩形代替该字符。

您可以使用http://icomoon.io等工具创建自己的字体和所需的字符

另请注意，某些浏览器在显示 0000 到 FFFF (plane 0 of the Basic Multilingual Plane (BMP)) 范围之外的字符时会出现问题。我在 Windows 和 IE

【讨论】：

【解决方案2】：

当您看到一个带有数字 01F509 的奇怪矩形时，这意味着浏览器已经正确识别了字符，但由于缺少 glyph 而无法显示它。系统没有包含字符字形的字体，或者由于浏览器错误，字符无法使用这种字体。有关一般性，请参阅我的Guide to using special characters in HTML。

引用的 Fileformat.info 页面有一个指向fonts that support the character 列表的链接。列表很短：Quivira、Segoe UI Emoji、Segoe UI Symbol、Symbola。（LastResort 不是真正的字体。）

Segoe UI 字体是专有的，仅在相对较新的 Windows 版本中可用。此外，还有几个版本的字体，这个字符似乎是最近才添加的。

这意味着您需要使用 Quivira 或 Symbola 作为网络字体（可下载字体）。如果您选择这样做，请使用例如http://www.fontsquirrel.com/ 生成字体文件和使用它们的 CSS 代码。请注意，Quivira 和 Symbola 字体都相当大，因此仅使用它们来获得一个字形有点不成比例。

在这一点上，很明显其他一些方法很可能更好，例如使用足够大小的图像并通过将其高度设置为em 单位来根据字体大小缩小它。

【讨论】：

或创建自己的字体
（顺便说一句很好的指南）