素材图标有时无法加载到移动网络浏览器上

Question

我目前正在构建VueJS单页Web应用程序，并且根据this SO post我正在自托管材料图标。我正在使用webpack v3.6捆绑我的资产，并使用"prerender-spa-plugin": "^3.4.0"预先渲染我的一些路由以用于SEO。

我面临的问题是，经常在移动设备（即iOS）上加载Web应用程序时，材质图标将永远不会加载并保持以下状态。发生这种情况时，刷新页面似乎无法解决问题。通常，我需要等待一段时间才能打开其他浏览器并加载同一页面，以便再次正确加载图标。但是，在某些情况下也可以成功加载图标。更令人困惑的是，当我在移动设备上访问我的网站时，这个问题似乎对我有严格的影响（因为我只有一台iOS设备，所以我没有机会在Android上进行测试）。使用任何桌面浏览器我都从未遇到过这个问题。我是否在错误地自托管“材质图标”，这就是为什么这种情况？

下面是我的_fonts.scss文件中的CSS。如您所见，我已经通过npm安装了"material-design-icons": "^3.0.1"，并且我的网址指向了“ material-design-icons”包中的字体文件。

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url("~material-design-icons/iconfont/MaterialIcons-Regular.eot"); /* For IE6-8 */
    src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url("~material-design-icons/iconfont/MaterialIcons-Regular.woff2") format('woff2'),
        url("~material-design-icons/iconfont/MaterialIcons-Regular.woff") format('woff'),
        url("~material-design-icons/iconfont/MaterialIcons-Regular.ttf") format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 16px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

我的app.scss文件仅以以下方式导入_fonts.scss文件。

@import "fonts";

Answer 1

将其放在标题中

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

示例：

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

官方链接。 Material-icons