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

Question

假设我在我的网站中有一些特殊字符。不幸的是，虽然这些图标可能超级有用，但它们不适用于所有浏览器。

对于那些他们没有显示的浏览器，我有什么选择？是否有可能使用JavaScript替换它们更友好的东西，如+符号？我可以以某种方式破解网站加载额外的字符集？我明显可以使用图像，但现在，如果可以，我宁愿避免这种情况 - 我希望它匹配它所围绕的文本颜色，并且文本可能会发生变化。

感谢您的帮助！

Answer 1

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

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

使用图像是一个很自然的选择，虽然它需要小心（图像应该足够大，并缩小比例以匹配文本字体大小）。而且，对于不同的文本颜色，您将需要不同的图像，因为CSS缺乏用于着色图像的实用工具，恐怕。

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

Answer 2

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

要包括图标字体在你的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> 

如果你不知道该web字体支持你的角色，你可以使用Icomoon App轻松创建一个角色。另请参阅我的开源代码Emoji icon font，其中提供了一个支持Emoji字符的Icon字体示例，这是我使用Icomoon App创建的。

---

更多信息：

• Create webfont with Unicode Supplementary Multilingual Plane symbols