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的dev服务器在本地测试它。我在我的html中使用标准<link>包含css。根据Chrome检查器中的“网络”标签，正在成功提取css文件。但是，我没有观察到任何字体的任何网络请求（成功或不成功）。同样，字体不起作用。

我没有看到任何尝试请求字体的事实让我觉得css有问题吗？另外要澄清的是，字体位于相对于css文件位置的相应目录中。虽然不管怎样，但我希望对字体提出请求，即使它是不正确的URL。

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

Answer 1

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

需要注意的一点是，根据这种体验，Chrome只会加载@font-face块中指定的一种字体。在这种特殊情况下，Chrome选择加载.ttf字体。

有关如何修复此程序包遇到的实际问题的详细信息，请参阅以下GitHub问题： https://github.com/scottdejonge/map-icons/issues/33

@ font-face中使用的字体文件未被提取

1 个答案: