材料图标有时无法在移动网络浏览器中加载

问题描述 投票:1回答:1

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

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

enter image description here

下面是我_fonts.scss文件中的CSS。如您所见,我已经通过npm安装了"material-design-icons": "^3.0.1",我的URL指向“ 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";
css vue.js fonts material-design
1个回答
0
投票

将其放在标题中:

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

示例:

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

官方链接。 Material-icons

© www.soinside.com 2019 - 2024. All rights reserved.