fonts - 图标字体 : some icon display as text instead on my machine

Question

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

环境

MacBook Pro(视网膜，13 英寸，2015 年初)

MacOS Sierra 10.12.3

正在使用 Chrome、Safari 和 Firefox 浏览器的最新版本

还有

我使用了一个不错的互联网连接并且字体文件不会无法加载

我不使用代理，也不住在中国

禁用所有浏览器扩展时，问题仍然存在。

编辑:我在浏览器控制台中根本没有错误/警告。

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


和 https://material.io/icons/


任何帮助表示赞赏

Answer 1

OP 显示的网页使用 Material Icons字体来自 Google Web Fonts .他们提供一个 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”字体，然后再加载 Web 字体。因此，如果 OP 有 outdated或自定义版本的“ Material 图标”，将不会显示所需的效果。

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