Question

我在网络项目中使用了一些材质图标。

现在，Google文档指出网络的图标字体专门针对 retina 显示（根据我的理解，这是指Apple设备）：

https://google.github.io/material-design-icons/#icon-font-for-the-web

所有现代网络浏览器都支持。

基于矢量：在任何比例下都很好看，视网膜显示，低dpi   显示屏幕。

然而它继续陈述：

图标字体包含750多个图标，重量仅为40KB（woff2 格式）。相比之下，SVG中的这些ZIP文件将超过大50％。

我目前正在使用图标字体的自托管版本，该版本仅引用woff2格式并声明字体如下：

@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/v8/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

然后我用连字符调用图标：

<i class="material-icons">face</i>

现在，当在iPhone和iPad等iOS设备上使用移动Safari查看documentation和我的网络项目时，它们根本不显示（显示的图标是不同的图标字体）：

有没有办法解决这个问题？ .svg格式是否需要包括例如？

实现iOS和移动Safari的材料设计图标

0 个答案: