前一段时间，我工作的一个济南网站建设，需要一些图标。 “没问题，”我想。 “我知道该怎么处理这个问题。 我将使用一个@font-face的高分辨率屏幕设置图标。 这将是一个单独的文件，以减少HTTP请求，我将只包括我所需要的，以减少文件大小的图标。“
“我什至可以使用Unicode字符作为图标的基础上，因此，如果@font-face不支持，那么用户仍然会看到类似意图图标。“我觉得很高兴，因为。
也就是说，直到我跑了页面中的设备的实验室。
在某些设备上，一些图标不显示。 然而，在相同的设备，其他人，所以显然它不是一个@font-face的问题。 那一定是底层的Unicode。
怎么办？
- 我可以用连字为
@font-face图标。 这些都是伟大的辅助功能，但不支持在Internet Explorer 9或更早版本。 - 我可以使用默认的“空白”的Unicode字符（ PUA范围 ），其中应用程序，如IcoMoon默认。 但是，再说一次， Internet Explorer有问题 ，如果用户设置了默认字体（如果他们是阅读障碍，例如），那么他们将不会看到任何有意义的东西。
- 有一些使用SVG好的理由 ，但我喜欢的灵活性
@font-face：改变悬停颜色很容易，例如，和@font-face图标将子像素抗锯齿渲染，而SVG的用途灰度。
我很高兴与底层的Unicode字符，因为它们给了一个很好的回退在Windows Phone 7，Opera Mini的老黑莓手机不支持用户@font-face 。 相反，我想，以确定哪些Unicode字符，我可以放心地使用。
于是，我开始做一些测试。 而这导致了一些更多的测试，然后更多一些。
到目前为止，我已经看了关于78的设备和5屏幕阅读器107 Unicode字符。 我会说实话 – 这不是最好玩的我曾经有过。 所以，我会救你的麻烦和分享的一些问题和潜在的解决方案，我已经遇到。
何必呢？
但是，在我们到达的是，我们只是要确保这是一切都是值得的。
从左到右依次为： @font-face图标用在Chrome结扎; @font-face图标使用Internet Explorer 9结扎（是的，什么也没有）; @font-face图标的Opera Mini使用的是Unicode的备用; @font-face使用Opera Mini的一个PUA代码点（是的，什么也没有）图标。 （ 大版 ）
左：SVG与灰度抗锯齿。 右： @font-face与像素渲染图标。 （无论在Firefox）。 （ 大版 ）
（哦，如果我听到的怨言“Opera Mini的？没有人会使用，”然后再考虑有7000万Opera Mini用户的iPad比 的世界。）
在我看来，使用底层的Unicode字符似乎是最稳健的做法，提供一个可视化图标，设备和浏览器的最大数量。
你怎么做，然后呢？
如果你还没有使用Unicode字符@font-face的图标，不用担心。 像工具IcoMoon 使它简单。 当你选择你要使用并单击生成字体的图标，你会看到一个页面，显示所有的你所选择的图标，用他们的名字，他们将被映射到Unicode代码点。 这通常是像e600 ，这个数字是什么，你会需要更换与您所选择的Unicode字符的十六进制值。
像IcoMoon工具能够方便地生成图标字体。 （ 大版 ）
那么，你怎么知道使用哪个Unicode字符？ 你可以去通过许多资源，列出所有的110,000个字符中的一个，但你可能已经有了更好的事情要做。 Shapecatcher 让生活更容易一点：抓你后的形状，它将返回列表外观相似的字符。
Shapecatcher将返回一个选择的外观类似的图标，为您服务。 （ 大版 ）
挑选你最喜欢的之一，复制Unicode十六进制值，并将其粘贴到IcoMoon。 一旦你已经为你的所有图标做到了这一点，请下载@font-face包是正常的。
因此，你应该使用哪些字符？
好吧，我不得不推迟到一切有关Web杰里米Keith的回答是：“ 这要看 。“在我的测试中，对于任何给定的Unicode字符支持巨大的变化（由”支持，“我的意思是，无论是@font-face图标显示或底层的Unicode字符出现，而不是用户看到一个空矩形或问号或什么都没有）。 在同一个“甚至Unicode字符块 的相关符号“往往有很大的不同程度的支持。
但我可以提供一点帮助。 一旦你知道你想要使用的Unicode字符， 通过统一运行 ，这将给你的基础上的设备支持得分，我已经这么远测试。
如果你感到快乐无论是与@font-face图标或Unicode字符被显示，你应该会看到非常高的支持。 一些图标上，我所测试过的一切工作。
最大的例外是绘文字字符 ，我会远离。 大约一半，我就已经测试过的设备不显示@font-face的图标，和许多不显示任何有意义的。 此外，iOS的替换它们固定大小的彩色图形，所以试图与缩放它们font-size将无法正常工作。
变异表情符号字符。 从左到右依次为：火狐（Windows 7）中，铬（Windows 7）中，铬（安卓4.2.1），歌剧院（Windows 7的）和Safari（IOS）。 （ 大版 ）
此外，如果一个设备可以呈现一个Unicode字符，它通常也能呈现一个@font-face使用该字符图标。 所以，你需要决定的权衡：使用一个图标，字体为您提供了更多的控制设计，但随后你会被添加到页面的权重和延缓图标的渲染，直到字体加载。
如果你只是直接使用Unicode字符，则可以适用于各种视觉样式编制。 即使在同一台计算机，浏览器可以在相当不同的方式呈现相同的字符。
Unicode字符260E显示在火狐，Chrome，IE浏览器和Opera一样的Windows 7机器上，并在iOS。 （ 大版 ）
在许多项目中，一致性和控制您的使用得到@font-face图标是值得的。 只把你需要的字体文件的图标将最大限度地减少下载的时间。
说什么更多关于@font-face的图标是没有意义的，因为扎克利沙曼写了这样一个优秀和良好的研究文章 。
无障碍
扎克看起来深度使用图标以这种方式的可访问性的影响，我想补充几点想法。
有两个主要的问题在这里：屏幕阅读器要么完全忽略的图标（这将让用户不知道有那么点意思进行交互）或宣布一些看似无关紧要的。 例如，如果你使用Unicode字符2261为您的“汉堡”图标，它要么被忽略或宣布为“平等”或“一致”，根据不同的屏幕阅读器。 无论这些将帮助用户了解此元素。
最好的方法取决于该图标是什么。 如果它仅仅是增加了视觉的蓬勃发展到一个文本标签或标题，那么我建议你从屏幕阅读器隐藏图标。 在这种情况下，而不是直接加入图标的字体到元件中的标准方法（即通过使用:before或:after CSS伪元素），将其添加到元件内部的跨度。 通过这种方式，你可以添加aria-hidden="true"的跨度，这将阻止它在一个被宣布的屏幕阅读器的合理数量的 。
<span aria-hidden="true">≡</span> Menu
但是，如果该图标将被用于自身，无其他任何提供意义或上下文，那么我建议像以前那样隐藏的图标，但补充说，在视觉上隐藏的文本标签。 这将提供一个线索，有一些与互动。
<style> .visiblyHidden { /* http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ */ position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } </style> <span aria-hidden="true"> ≡ </span><span>menu</span>
请问font-family帮助？
我听说，你应该包括像Arial字体的Unicode MS字体，在被用来显示Unicode字符的字体系列堆栈的建议，但并不保证符号会出现的每一个人。 如果浏览器不能找到那些你已经列出了所需的Unicode字符的字体font-family申报，然后它会试图找到在OS任何字体将显示它。
一致性是很难得的，虽然，因为这将取决于该特定设备上所使用的浏览器中可用的字体。 浏览器厂商可以自由地寻找任何匹配的字体，但是他们认为最好的 – 为求表现，浏览器可能会停止搜索，如果它的时间太长。
通过各种手段，包括有Arial Unicode MS或的Segoe UI的符号在font-family申报，如果你喜欢它们如何呈现您所使用的符号，但你会依赖于被安装在设备上的字体。 如果你想控制如何符号看起来，你最好带@font-face图标。
检测Unicode支持
所以，可以的JavaScript出手相救？ 好吧，Modernizr的确实有一对夫妇的招数了它的袖子。 一种方法 比较违心，这可能会产生回退一个字符支持常用字符的宽度，如果不同，决定了第一个字符已经呈现如预期。
另一个重点是试图确定绘文字支持 的字符绘制到canvas的元素，然后检查单个像素，看看它是否被填充的字符。 但问题是，正如我们已经看到的是，Unicode支持不是一个布尔值; 仅仅因为一个浏览器显示一个字符并不意味着它会显示另一个。 所以，我不会依靠这些方法一般，但他们可能会在某些情况下非常有用。
编码你的Unicode
这里提的编码很可能是值得的，如果您正在使用的Unicode。 编码方式告诉浏览器如何解释一个页面上的任何Unicode字符。 如果使用文本编辑器的编码不同，您的最终用户的设置，也没有说明，以帮助它的浏览器是有意义的，那么用户会看到很多看似随机字符或问号。
在字形的变化，从一个单一的Unicode代码点具有不同的页面编码的一个例子。 （ 大版 ）
幸运的是，在网络上几乎所有这些天使用UTF-8，所以这不是它曾经是头痛。 但是，它不伤害，以确保，这就是为什么你会听到的建议，包括<meta charset="utf-8">在<head>您的文件。 如果您指定的HTML文件的编码，那么你不需要任何链接的CSS文件，再指定它 – 它会被认为是相同的。
如果你这样做，你看到的仍然是奇怪的字符，然后检查您的HTTP标头设置为UTF-8也是如此。 任何编码设置会覆盖meta charset声明。
但是，如果你有一个不同的编码类型工作，那么避免“嵌入”字符（即只需直接粘贴单个字符形状到文本编辑器）。 如果您使用的完整的参考数值 ，则字符将不受文档的编码类型 。
换句话说，如果你想用2665的心脏图标，然后用♥ ，不♥。 以这种方式嵌入符号是最安全的方法，但添加口音等体副本不建议 ，因为它会使代码难以阅读和维护。 在这种情况下，得到的编码右更好。
手工采摘字体
的一个特点@font-face的常常被忽视的是unicode-range 。 这使您可以指定一个特定的字体被用于短短Unicode字符。
但是，为什么你要？
也许你已经找到了完美的字体为您的身体的副本，但你宁愿从一个相似的字体一个或两个标点符号，或者你要使用旧式数字 ，但你的身体字体不包括它们。 使用unicode-range ，您可以使用替代字体只为那些想要换出的字符。
你可以指定 单个字符，一个逗号分隔的列表，或在字符替换字体被渲染的整个范围。
它已经从使用Unicode工作的其他方法的语法稍有不同。 你需要添加U+字符的十六进制数之前。 所以，如果你想要一个不同的字体为您的所有号码（这是0030和0039之间的数字表示以Unicode）的，你会使用这样的事情：
@font-face { font-family: 'oldStyleFigures'; src: url(fonts/old-style-figures.ttf) format("opentype"); unicode-range: U+30-39; }
那么你想补充一点：
p { font-family: oldStyleFigures, Arial, sans-serif; }
这意味着，所有的段落文本将使用Arial字体，除了数字，这将使用oldStyleFigures字体。
不足之处？ 当然，也有一个缺点。 它还是 不工作在Firefox -替换字体将被应用到所有的字符，不只是你的范围内所指定的人。
从上到下依次为：无unicode-range使用; unicode-range增加了对数字; unicode-range为在Firefox中观看数字。 （ 大版 ）
不过，德鲁麦克莱伦有一个解决方法缺乏支持在Firefox 。
Unicode的语法小抄
你如何添加一个Unicode字符将决定您需要引用它的方法。 这里有一个简单的总结：
| 哪里 | 句法 | 例子 |
|---|---|---|
| HTML（十六进制数） | &#x????; |
|
| HTML（十进制数） | &#????; |
（注：无 |
| CSS内容（数量必须是十六进制） | \???? |
|
unicode-range （数量必须是十六进制） |
U+???? |
|
近期评论