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替换其他字符的特殊字符，但没有简单的方法来决定何时需要这样做。这样做总会使特殊字符的使用毫无意义。检查系统是否包含包含字符的字体是棘手的。 - 请注意，在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>

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

更多信息：

Create webfont with Unicode Supplementary Multilingual Plane symbols

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

2 个答案: