图标字体：一些图标在我的机器上显示为文本答案

【问题标题】：Icon fonts : some icon display as text instead on my machine图标字体：一些图标在我的机器上显示为文本
【发布时间】：2017-08-25 21:49:17
【问题描述】：

这是关于我的机器如何看待网络的问题，而不是个人网络项目。 在我的机器上，一些图标字体显示为文字文本（图标的名称），而不是图形图标本身。

环境

MacBook Pro（Retina，13 英寸，2015 年初）
MacOS Sierra 10.12.3
使用最新版本的 Chrome、Safari 和 Firefox 浏览器时发生的事情

还有

我使用了不错的互联网连接，并且字体文件没有加载失败
我不使用代理，也不住在中国
禁用所有浏览器扩展时问题仍然存在。
编辑：我在浏览器控制台中根本没有错误/警告。

例如，这就是我看到https://developers.google.com/web/的方式

和https://material.io/icons/

任何帮助表示赞赏

【问题讨论】：

请打开开发者控制台查看错误信息
如果你用inspector检查那些坏元素的样式怎么办？
您的系统是否可能有不兼容的“Material Icon”字体版本？（检查 FontBook.app）
是的。就是这样。我一定是安装了另一种同名的损坏字体。
很高兴有帮助。到达真正的计算机后，我会发布答案。

标签： fonts material-design font-face webfonts icon-fonts

【解决方案1】：

OP 显示的网页通过Google Web Fonts 使用Material Icons 字体。他们提供一个 CSS 文件，例如：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), 
       local('MaterialIcons-Regular'), 
       url(https://fonts.gstatic.com/s/materialicons/v21/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  ...
}

它总是会先尝试加载本地版本的“Material Icons”字体，然后再加载网络字体。因此，如果 OP 有outdated 或自定义版本的“Material Icons”，将不会显示想要的效果。

要解决此问题，请删除本地“Material Icons”字体，或者如果您仍需要本地副本，则将其替换为 latest version。

【讨论】：

正是我所需要的。感谢您的明确解释。
我刚刚遇到了这个问题，因为我正在寻找为什么在使用本地版本时有些图标会显示而有些却没有。我确实已经假设它们已经过时了，即使它们自 2016 年以来就没有更新并替换它们，同样的结果，还有什么想法会导致这种情况？ TIA。