浏览器不会获取字体文件答案

【问题标题】：Browser won't fetch font files浏览器不会获取字体文件
【发布时间】：2020-05-15 01:42:00
【问题描述】：

我有一个简单的 HTML 演示页面来试用我的自定义字体文件（一组 SVG 图标）

HTML比较简单，我指定字体文件的路径（与HTML文件相同的目录）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nextgenicons</title>
    <style>
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 10px 20px;
        }

        .preview {
            line-height: 2em;
        }

        .previewicon {
            display: inline-block;
            width: 32px;
            text-align: center;
        }

        .icon {
            display: inline-block;
            font-size: 16px;
        }

        @font-face {
    font-family: "nextgenicons";
    src: url("nextgenicons.eot?95d1e9193d97fb68fae3bc44b221fa23?#iefix") format("embedded-opentype"),
url("nextgenicons.woff2?95d1e9193d97fb68fae3bc44b221fa23") format("woff2"),
url("nextgenicons.woff?95d1e9193d97fb68fae3bc44b221fa23") format("woff"),
url("nextgenicons.svg?95d1e9193d97fb68fae3bc44b221fa23#nextgenicons") format("svg");
}

.icon {
    line-height: 1;
}

.icon:before {
    font-family: nextgenicons !important;
    font-style: normal;
    font-weight: normal !important;
    vertical-align: top;
}

.icon-logo:before {
    content: "\f101";
}
.icon-ok:before {
    content: "\f102";
}
.icon-settings:before {
    content: "\f103";
}
.icon-menu:before {
    content: "\f104";
}

    </style>
</head>
<body>
    <h1>nextgenicons</h1>
    <div class="preview">
        <span class="previewicon">
            <span class=" icon-logo"></span>
        </span>
        <span>logo</span>
    </div>
    <div class="preview">
        <span class="previewicon">
            <span class=" icon-ok"></span>
        </span>
        <span>ok</span>
    </div>
    <div class="preview">
        <span class="previewicon">
            <span class=" icon-settings"></span>
        </span>
        <span>settings</span>
    </div>
    <div class="preview">
        <span class="previewicon">
            <span class=" icon-menu"></span>
        </span>
        <span>menu</span>
    </div>
</body>
</html>

浏览器只显示方块来代替实际的图标：

这里是根目录，里面有 HTML 页面和字体文件（请注意 .html 是带有 IE 图标的那个，另一个带有 Chrome 图标的是 .svg 文件）：

更有趣的是浏览器根本不获取字体文件。这是页面加载时网络活动的快照：

所以我猜想显示黑色方块是因为浏览器没有获取字体文件，但为什么会这样呢？

【问题讨论】：

css 文件不存在，它嵌入在 HTML 文件的 head 部分（如您在问题中所见）。会不会是这个问题？
@Pete 不需要服务器，我只需双击 HTML 页面。我尝试了一个自定义 XAMPP 实例，它做同样的事情。服务器可以提供这些文件，因为它适用于其他更复杂的网站

标签： html css svg browser fonts

【解决方案1】：

您正在定义图标类，但是您没有在 dom 中关联它 <span class=" icon-logo"></span> 应该是 <span class="icon icon-logo"></span>

【讨论】：