无法加载字体文件，404错误

Question

我在一个项目中使用了两个字体图标。 Font Awesome 和自定义 SVG 字体。所有字体文件都在同一个文件夹中。这是文件结构：

-assets
    -css
        -font-awesome.min.css
        -themefy.css
    -fonts
        -font-awesome.eot
        -font-awesome.svg
        -font-awesome.ttf
        -font-awesome.woff
        -font-awesome.woff2
        -font-awesomed41d.eot
        -themify.eot
        -themify.svg
        -themify.ttf
        -themify.woff
        -themifyd41d.eot

这两种字体在本地主机上工作正常，但 themify 字体在部署后不起作用。它 returns chrome 控制台中的 404 not found。我对它进行了 2/3 天的大量研究，仍然无法弄清楚问题是什么。这是我的主题化 @font-face:

themify.css

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

If you want to see it live: http://smartrahat.com/

Answer 1

请删除字体的后缀 (?-fvbane) CSS 这可能是 404 造成的。

Answer 2

将下面的代码添加到您的 Web.config 文件中。

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
    </staticContent>    
  </system.webServer>

无法加载字体文件，404错误

Cannot load font files, 404 error

css

svg

webfonts

font-face

http-status-code-404