0

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

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

谢谢你的帮助！

4

2 回答 2

2

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

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

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

您可以通过@font-face. 在 U+1F44D 的情况下，Symbola 似乎是唯一的选择。它相当大，但这些天可能不会太大。

于 2013-01-06T23:15:05.983 回答
0

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

要在 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 应用轻松自己创建一个。另请参阅我的开源Emoji 图标字体，了解我使用 Icomoon 应用程序创建的支持 Emoji 字符的图标字体示例。

更多信息：

于 2015-07-09T04:30:54.040 回答