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

时间:2015-12-11 06:17:22

标签: css css3 fonts font-face

我正在尝试使用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包的内容。但这可能是出于完全不同的原因。这种观察是否有意义,如果是这样,有人可以解释为什么这两种浏览器选择以这种方式工作吗?

1 个答案:

答案 0 :(得分:1)

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

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

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