材质图标的 css 后备

Posted 2023-02-22

【中文标题】材质图标的 css 后备

【英文标题】：css fallback for material icons

【发布时间】：2017-09-28 23:39:57

【问题描述】：

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

css 看起来像

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

有没有办法为此content 提供回退？

【参考方案1】：

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

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

【参考方案2】：

您可以使用 Unicode 刻度线吗？

http://graphemica.com/%E2%9C%94

content: "\2714"; 要么 content: "✔";

如果您担心没有 Unicode 支持 - 我认为像“完成”这样的文本消息或使用图像会起作用。

更新：

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

【讨论】：

我正在尝试使用材质图标 - “完成”。我这样做的方式对于所有浏览器和屏幕都非常有效，除了人们手动禁用下载网络字体的浏览器。

如果您不能使用字体，请下载/使用 SVG 或 PNG 版本