CSS材料图标的后备

Question

浏览器在Android上像Firefox这样的浏览器使用户能够手动禁用Web字体，这基本上意味着不会下载Web字体。我正在使用材料设计刻度标记在设计中渲染检查标记。

CSS看起来像

font-family: 'Material Icons';
content: "done";

有没有办法给此content的后备？

Answer 1

您可以使用Unicode tick标记吗？

http://graphemica.com/✔

content: "2714";或者 content: "✔";

如果您担心没有Unicode支持 - 我认为像"完成"这样的短信或使用图像会起作用。

更新：

如果您担心人们会阻止字体 - 然后使用PNG Sprites：https://github.com/google/material-design-icons/tree/master/sprites

Answer 2

您可以从github尝试此解决方案。它使用jQuery用背景图像替换字体图标：http：//dfcb.github.io/iconfont-fallback/

另一种可能性是使用SVG Sprites：http：//maddesigns.de/svg-sprites-icon-fonts-2309.html