谷歌材料图标字体 - 完整浏览器支持指南？

Posted 2023-02-22

【中文标题】谷歌材料图标字体 - 完整浏览器支持指南？

【英文标题】：Google material icon font - Guide for full browser support?

【发布时间】：2017-01-21 01:12:12

【问题描述】：

我想使用 Google 的材料图标 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 及以下版本，他们说要使用以下 sn-p，但在我的 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 也是如此。他们提供不同的解决方案。

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

【参考方案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.