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

Google material icon font - Guide for full browser support?

本文关键字:浏览器 支持 材料 图标 字体 谷歌      更新时间:2023-09-26

我想使用谷歌的材料图标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及以下版本,他们说使用下面的代码片段,但它在我的ie9的ie11模拟器中是空白的。它在实际的IE9中工作吗?

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

我需要做浏览器嗅探或我只是包括和浏览器知道只显示一个?

此页列出了移动设备https://github.com/google/material-design-icons/issues/179的问题,这也是为什么谷歌材料图标不能在移动设备上显示。他们提供了不同的解决方案。

是否有经过良好测试的权威指南?是不是这个世界还没有准备好将这些图标用作字体?

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

Google材质图标使用了最先进的东西,帮助屏幕阅读器的人理解图标是什么,例如。人脸图标:

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

这就是所谓的连接,并不是很好支持(IE 10),但它仍然是相当不错的,取决于你的客户端/项目需要什么。以前我们使用aria-hidden来阻止屏幕阅读器显示图标的id。