跨平台Unicode字体

Question

我目前正在开发一个在某些元素上使用 unicode 符号的响应式页面，我希望它们具有相同的“外观”。据我了解，每个浏览器和每个操作系统都有不同的 unicode 符号字体，我注意到 font-family 属性没有帮助。

我现在最大的问题是，我使用的所有 unicode 符号在智能手机上都显示为彩色表情符号，这通常会破坏页面的设计。有没有办法解决这个问题？我错过了什么吗？

Answer 1

你的问题的答案可以分为两部分：

1. 如何不用担心客户端字体：网络字体
2. 如何在不改变浏览器呈现的情况下使用表情符号/象形图：css 图标字体

后一部分更相关，因为您专门处理表情符号。

网页字体

Web 字体将解决跨系统兼容性问题。这些是提供给浏览器的字体。 Google fonts 是一个很好的起点——看到有多少网络使用它们实际上很奇怪。
如果您的 unicode 不仅仅是希腊语或 CJK 并且使用例如符文，您将需要制作自己的网络字体（这很容易，谷歌搜索提供了许多 web servers 和 guides），这利用了 @font-face规则 (wiki)。后者的一个严重缺点是，如果您使用在某个存储库或您的机器上找到的字体，则会出现版权问题，因此值得关注。

图标字体库

图标字体库是一个样式表库（带有字体），它在具有以该图标命名的类的空元素之后插入图标，例如在FontAwesome<i class="fa fa-hand-spock-o"></i>。
由于表情符号是最近添加的，并且支持不完整，因此网站和浏览器自己添加了支持，通常为它们着色（例如Chromoji extension）。因此，我强烈建议使用图标字体库。 我偏爱FontAwesome——例如 an academic tool of mine——，但还有很多其他选择，有些是：

• Bootstrap's Glyphicons
• Typicons
• Fontello 允许混合各种图标字体库（可以在此处找到更长的列表）。

但是，如果您要查找的图标不存在，您可以使用众多网络资源之一创建图标字体库（例如 iconmoon.io）。对于图像本身，flaticon 拥有大量图标，可以转换为图标库，从而节省您在 illustrator 中苦苦挣扎的时间。