html - 浏览器不会获取字体文件

问题描述

我有一个简单的 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 文件）：

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

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

标签： htmlcsssvgbrowserfonts

html - 浏览器不会获取字体文件

问题描述

解决方案

推荐阅读