css - 未获取@font-face 中使用的字体文件

Question

我正在尝试使用 map-icons使用以下 css 获取和加载一些字体文件的包。据我所知，路径(包括 .. )没问题。

@font-face {
    font-family: 'map-icons';
    src:url('../fonts/map-icons.eot');
    src:url('../fonts/map-icons.eot#iefix') format('embedded-opentype'),
        url('../fonts/map-icons.ttf') format('truetype'),
        url('../fonts/map-icons.woff') format('woff'),
        url('../fonts/map-icons.svg#map-icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

https://github.com/scottdejonge/map-icons/blob/master/dist/css/map-icons.css

我正在使用 Django 的开发服务器在本地进行测试。我将 css 包含在我的 html 中，标准 <link> .根据 Chrome 检查器中的“网络”选项卡，已成功获取 css 文件。但是，我没有观察到对任何字体的任何网络请求(成功或不成功)。同样，字体也不起作用。

我没有看到任何请求字体的尝试，这让我觉得 css 有问题吗？还要澄清一下，字体位于相对于 css 文件位置的相应目录中。尽管如此，我希望即使是不正确的 URL 也会对字体提出请求。

编辑: 我注意到如果我在某些 css block 中使用字体，即通过添加 font-family: map-icons;对于某些 css block ，Chrome 和 Firefox 都会成功请求 map-icons.ttf。不幸的是，该字体在 map-icons 包的意图中仍然不起作用。但这可能出于完全不同的原因。这种观察是否有意义，如果是的话，有人可以解释为什么这两种浏览器选择以这种方式工作吗？

Answer 1

我相信没有获取字体，因为没有以任何会导致字体呈现的方式使用字体。因此，我认为在 Chrome 网络检查器中没有看到任何获取的字体意味着负责获取这些字体的代码存在错误，这是不正确的。 Chrome 只是决定在不呈现字体时不获取字体。

需要注意的是，基于这种体验，Chrome 将仅加载 @font-face block 中指定的一种字体。在这种特殊情况下，Chrome 选择加载 .ttf 字体。

有关我如何解决我在使用此软件包时遇到的实际问题的更多信息，请参阅以下 GitHub 问题: https://github.com/scottdejonge/map-icons/issues/33