我正在尝试使用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包的内容。但这可能是出于完全不同的原因。这种观察是否有意义,如果是这样,有人可以解释为什么这两种浏览器选择以这种方式工作吗?
答案 0 :(得分:1)
我认为没有提取字体,因为没有以任何可能导致字体呈现的方式使用字体。因此,我假设没有看到Chrome网络检查器中提取的任何字体,这意味着负责获取这些字体的代码是错误的,这是不正确的。 Chrome只是决定在不渲染字体时不提取字体。
需要注意的一点是,根据这种体验,Chrome只会加载@font-face
块中指定的一种字体。在这种特殊情况下,Chrome选择加载.ttf
字体。
有关如何修复此程序包遇到的实际问题的详细信息,请参阅以下GitHub问题: https://github.com/scottdejonge/map-icons/issues/33