图标字体：一些图标在我的机器上显示为文本而不是

Question

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

环境

MacBook Pro（视网膜显示屏，13 英寸，2015 年初）
MacOS 塞拉利昂 10.12.3
正在使用 Chrome、Safari 和 Firefox 浏览器的最新版本

还有

我使用良好的互联网连接并且字体文件不会加载失败
我不使用代理也不住在中国
禁用所有浏览器扩展后问题仍然存在。
编辑：我在浏览器控制台中根本没有 error/warning。

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

和https://material.io/icons/

感谢任何帮助

Answer 1

OP 显示的网页使用 Material Icons font via 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" 字体，然后再加载网络字体。因此，如果 OP 有 outdated 或自定义版本 "Material Icons"，则不会显示所需的效果。

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

图标字体：一些图标在我的机器上显示为文本而不是

Icon fonts : some icon display as text instead on my machine

fonts

material-design

font-face

webfonts

icon-fonts