javascript - Google Material 图标字体 - 完整浏览器支持指南？

Question

我想使用 Google 的 Material 图标 https://design.google.com/icons/作为一种字体，但担心浏览器支持。是否有关于使用哪些 CSS、后备等的指南？我需要进行浏览器嗅探吗？已知的限制是什么？

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">

<i class="material-icons edit_icon">more_vert</i>

对于 ie9 及更低版本，他们说使用下面的代码片段，但在我的 IE 11 的 IE 9 模拟器中它是空白的。它在实际的 IE9 中工作吗？

<i class="material-icons">&#xE5D4;</i>

我需要进行浏览器嗅探还是只包含两者并且浏览器知道只显示一个？

此页面列出了移动设备 https://github.com/google/material-design-icons/issues/179 的问题就像这个Why Google Material Icons Can't be Shown on Mobile 。他们提供不同的解决方案。

是否有经过充分测试的权威指南？难道世界还没有准备好将这些图标用作字体吗？

Answer 1

一般来说，浏览器支持图标字体是最好的，它们可以一直追溯到 IE6。

Google Material Icons 使用最先进的东西来帮助屏幕阅读器的人们理解图标是什么，例如。脸部图标:

<i class="material-icons">face</i>

这称为连字，支持不太好(IE 10)，但它仍然相当不错，具体取决于您的客户/元素的需求。之前我们使用 aria-hidden 来阻止屏幕阅读器说出图标的 id。 Here is an article that may be useful further reading.