Question

我一直在使用Cordova应用程序，我一直在测试三星SM-J700P。

我对Material Icons的设置基本上是这样的：

HTML -

<div id="alarm"><i class="material-icons">add_alert</i></div>

CSS -

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src:
      url(./path/to/MaterialIcons-Regular.woff2) format(woff2),
      url(./path/to/MaterialIcons-Regular.woff) format(woff);
}

我在项目中本地保存了Material Icons包，因此访问图标不会有任何问题。这已经在这款手机上进行了整个测试，直到几天前，我得到了我的SM-J700P的更新。之后，我的图标都不再出现了。手机上当前版本的软件是：J700PVPS1AQD1。

因为Cordova在Android上默认为铬窗口，所以我只需要woff2包用于图标，所以我怀疑这是问题所在。我运行该程序时，我的Android Studio控制台也出现了一个奇怪的错误。

E/libEGL: validate_display:225 error 3008 (EGL_BAD_DISPLAY)
I/OpenGLRenderer: Initialized EGL, version 1.4
W/AudioCapabilities: Unsupported mime audio/mpeg-L1
W/AudioCapabilities: Unsupported mime audio/mpeg-L2
//... Lots more Unsupported mime types which I don't understand...
E/chromium: [ERROR:interface_registry.cc(104)] Failed to locate a binder for interface: autofill::mojom::PasswordManagerDriver
More unsupported mime types...

我不知道控制台中的这些错误有多重要，但是自更新以来它们也是新的。该应用程序的其余部分工作正常，这些错误都没有崩溃，它只是不再显示材料图标。

任何想法？

编辑：更多信息。如果我只在我自己的Chrome浏览器中显示html文件，则图标会正常显示。所以看起来这可能是科尔多瓦的一个问题。我还用三星S7 Edge测试了应用程序，它也不会显示图标，因此它似乎与手机无关。

Answer 1

答案简直不足为奇。在CSS中，我忘记了引号。

所以：

@font-face { 
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src:
      url(../Path/To/MaterialIcons-Regular.woff2) format (woff2);
}

应该是：

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src:
      local('Material Icons'),
      local('MaterialIcons-Regular'),
      url(../Path/To/MaterialIcons-Regular.woff2) format ('woff2');
}

这是根据Google文档here

材料设计图标突然停止工作

1 个答案: