字体在IIS 8.0中无法正常显示

Question

我在我的程序中使用了Font Squirrel生成的字体，但无法在IIS中使用，只能在本地主机上使用。我已经添加了application/font-woffarticle到我的MIME类型中，但它仍然不能正常工作。

Context
--Fonts
----font location
--css files

CSS（层叠样式表）

@font-face {
    font-family: 'wallStreetFont';
    src: url('Fonts/subway-webfont.eot');
    src: url('Fonts/subway-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/subway-webfont.woff2') format('woff2'),
         url('Fonts/subway-webfont.woff') format('woff'),
         url('Fonts/subway-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

编辑当前MIME

我正在使用默认的IIS 8 MIME font/x-woff。

- joetinger

---

你是如何调用它的？你尝试过Font Squirrel zip中的示例输出吗？ - Aibrean

如果您正在使用IIS 8，则不需要在Web配置中添加WOFF的MIME类型。实际上，这样做很可能会因为重复而导致错误。 - Colin Bacon

@Aibrean 是的，样例输出有效。 - joetinger

@ColinBacon 我发帖后就看到了这个。所以我目前的字体是font/x-woff，这是从IIS 8.0继承而来的。但仍然无法获得正确的字体。 - joetinger

Answer 1

很高兴看到WOFF2被包括在Font Squirrel字体中！虽然IIS 8不需要为WOFF添加mime类型，但需要为WOFF2添加一个。 W3C建议：

application/font-woff2

有关 WOFF2 的更多信息，请参见此处。

要在 IIS 中添加 MIME 类型，请按以下方式修改您的Web.Config：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <!-- ... -->
  <system.webServer>
    <!-- ... -->
    <staticContent>
      <!-- ... -->
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
    <!-- ... -->
  </system.webServer>

- Colin Bacon

---

我添加了 woff2 但仍然没有任何变化。 - joetinger

如果您在开发者工具中查看，当它试图获取字体文件时是否出现了404错误？如果是，请检查路径是否正确，并确保您有权限在浏览器中访问它。 - Colin Bacon

我假设你正在使用ASP.NET的捆绑和压缩功能。如果你在捆绑配置中设置了BundleTable.EnableOptimizations = true，那么你本地的主机应该与生产服务器上的行为相同。 - Colin Bacon

感谢您的所有帮助，现在它已经可以工作了。这是woff2和404错误的组合，最终发现是我的捆绑包中拼写错误导致的。谢谢！ - joetinger

这并没有帮助我。我在同一个文件夹中有.woff和.woff2文件。我可以获取.woff但无法获取.woff2。我尝试添加了这段代码，并手动使用IIS添加了Mime Type，但仍然出现404错误。我还能尝试什么？ - RealSollyM

Answer 2

为了使 woff 和 woff2 字体在 IIS 中正常工作，您应该将以下 MIME 类型添加到 Web.Config 文件中。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>  
  <system.webServer>    
    <staticContent>
        <remove fileExtension=".woff" />
        <remove fileExtension=".woff2" />
        <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

如果你在Google Chrome上仍然遇到404错误，在重新加载页面之前，应清除浏览器缓存。

- Varun

---

规范现在建议使用application/font-woff作为woff的mimeType。 - Steven

我只遇到了.woff2 404问题，这对我有用。我只使用与woff2相关的行。 - Francisc0

Answer 3

请注意，还可以在IIS管理器中配置MIME类型。只需选择网站，然后在主窗格中的IIS下双击MIME类型图标即可。

您应该能够看到所有现有MIME类型的列表，并能够使用右侧窗格中的Add...链接添加新的MIME类型。

- Scott Munro

---

为什么不使用web.config呢？！！ - Mojtaba Pourmirzaei

因为不是每个人都是系统管理员，这就是IIS具有用户界面的全部原因。 - Slava

如果您要在IIS中部署非.NET网站（例如Angular应用程序），则需要按照以下方式进行。 - Jon Kruger

Answer 4

我正在进行以下操作：

1. MVC5中的捆绑
2. 构建bootstrap
3. 在bootstrap中使用@font-face

我在服务器上部署了一个min.css文件，非min文件被包含在bundle中。一旦我删除了.min.css文件，它就可以正常工作了。

- JohnWrensby

Answer 5

今天我在部署Web解决方案Metro4 UI图标时遇到了这个问题，从CDN切换到已编译选项。

我的项目是使用WebSharper平台开发的，但解决方案与这些实现细节无关。

长话短说，我发现我必须在Web.config的system.webServer下的security部分中添加文件扩展名，例如.ttf。

<security>
    <requestFiltering>
        <fileExtensions>
            <add fileExtension=".ttf" allowed="true" />
        </fileExtensions>
    </requestFiltering>
</security>

同样的配置选项也可在IIS的GUI设置中找到。

- user11323942