在旧浏览器中显示表情符号答案

【问题标题】：Displaying emojis in old browsers在旧浏览器中显示表情符号
【发布时间】：2012-12-20 16:26:00
【问题描述】：

假设我的网站中有一些特殊字符，例如????。不幸的是，虽然像这样的图标非常有用，但它们并不适用于所有浏览器。

对于那些不显示它们的浏览器，我有哪些选择？是否可以使用 JavaScript 将它们替换为更友好的东西，例如 + 符号？我可以以某种方式破解网站以加载其他字符集吗？我显然可以使用图像，但现在，如果可以的话，我宁愿避免这种情况——我希望它与周围的文本颜色相匹配，并且该文本可能会发生变化。

感谢您的帮助！

【问题讨论】：

标签： javascript unicode

【解决方案1】：

“?”等特殊字符 U+1F44D 竖起大拇指大多不起作用。这主要不依赖于浏览器，而是依赖于字体：很少有字体包含这样的字符，而且你不能指望 Joe Q. Public 的计算机包含其中的任何一个。在实践中，例如U+1F44D 可以在 Segoe UI Symbol（可能预装在最新的 Windows 系统中）和 Symbola（需要用户下载的免费字体）中找到。有关一般性，请参阅我的Guide to using special characters in HTML。

当然可以使用 JavaScript 将特殊字符替换为其他字符，但没有简单的方法来决定何时需要这样做。这样做总是会使使用特殊字符毫无意义。检查系统是否具有包含字符的字体很棘手。 – 请注意，在 JavaScript 中使用像 U+1F44D 这样的字符需要小心，因为它是一个非 BMP 字符，并且对应于 JavaScript 字符串的两个连续组件，即高代理代码单元和低代理代码单元。

使用图片是一种自然的选择，但需要小心（图片应该足够大并按比例缩小以匹配文本字体大小）。而且你需要为不同的文本颜色使用不同的图像，因为 CSS 缺少用于为图像着色的实用工具，恐怕。

您可以通过@font-face 使用可下载的字体（网络字体）。在 U+1F44D 的情况下，Symbola 似乎是唯一的选择。它相当大，但现在可能不会太大。

【讨论】：

我不敢相信我什至没有想到使用@font-face。谢谢你的提示！ :)

【解决方案2】：

您应该包含一个支持您要使用的表情符号字符的网络字体。

要在 CSS 中包含图标字体，请使用以下代码：

@font-face {
    font-family: 'myfont';
    src:url('fonts/myfont.eot?-td2xif');
    src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'),
        url('fonts/myfont.woff?-td2xif') format('woff'),
        url('fonts/myfont.ttf?-td2xif') format('truetype'),
        url('fonts/myfont.svg?-td2xif#myfont') format('svg');
    // Different URLs are required for optimal browser support
    // Make sure to :
    // 1) replace the URLs with your font's URLs
    // 2) replace `#myfont` with the name of your font
    font-weight: normal; // To avoid the font inherits boldness
    font-style: normal; // To avoid font inherits obliqueness or italic
}

.emoji {
    font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback
    speak: none; // To avoid screen readers trying to read the content
    font-style: normal; // To avoid font inherits obliqueness or italic
    font-weight: normal; // To avoid the font inherits boldness
    font-variant: normal; // To avoid the font inherits small-caps
    text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase
    line-height: 1; // To avoid the font inherits an undesired line-height
    -webkit-font-smoothing: antialiased; // For improved readability on Webkit
    -moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla
}

然后您可以像这样包含您的符号：

<span class="icon">&#128077;</span>

如果您不知道支持您的角色的网络字体，您可以使用Icomoon App 轻松地自己创建一个。另请参阅我的开源 Emoji icon font，了解我使用 Icomoon 应用程序创建的支持表情符号字符的图标字体示例。

更多信息：

Create webfont with Unicode Supplementary Multilingual Plane symbols

【讨论】：