c# - IIS Web 字体、Bootstrap 3 Glyphs 不加载 IE9 或 10。Chrome 和 Firefox 工作

Question

场景:

将 IIS 7.5 与 MVC4 应用程序结合使用。

如果您浏览到它们的绝对路径，则可以从服务器下载字体。任何字体都没有 404 错误。

控制台中没有显示其他错误，IE 开发工具(或 Chrome、Firefox 开发工具)中也没有网络捕获

IE9 和 IE10 - Web 字体不加载。 Bootstrap 3 字形图标不加载。

Firefox 和 Chrome - 正确加载网络字体。 Bootstrap 3 字形图标加载正确。

当从 Visual Studio 2012 开发服务器在本地运行网站时，字体在所有浏览器中都能正常加载。 Bootstrap 字形可在所有浏览器中正确加载。

我的 CSS 代码:

@font-face {
    font-family: 'chunkfiveroman';
    src: url('../Content/fonts/chunkfive-webfont.eot');
    src: url('../Content/fonts/chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
            url('../Content/fonts/chunkfive-webfont.woff') format('woff'),
            url('../Content/fonts/chunkfive-webfont.ttf') format('truetype'),
            url('../Content/fonts/chunkfive-webfont.svg#chunkfiveroman') format('svg'),
            url('../Content/fonts/Chunkfive.otf');
    font-weight: normal;
    font-style: normal;
}

我尝试过的:

我已经手动将 mime 类型添加到服务器以用于 Web 字体(.otf、.eot、.woff)(.svg 和 .ttf 已经存在)。

我已经尝试根据谷歌搜索(application/octet-stream、font/otf 等)以多种不同的方式在所有手动添加的字体条目上设置 mime 类型

我的求助请求:

还能是什么？还有什么我可以尝试的吗？ 编辑:见下文。如何让 IE 从服务器下载字体？同样，在 Firefox 和 Chrome 中，它们都下载了字体并且工作正常。

编辑:

你可以在本地看到，它下载了字体并且工作正常。

然而，当上传到服务器上的 IIS 时，它甚至不会尝试下载字体。

Answer 1

我遇到了这个问题，我发现它是由于在 Release模式下构建时的缩小而发生的。

我没有从 Bootstrap 站点手动下载文件并配置捆绑，而是使用 nuget 包为我完成了这一切。

如果您想这样做，请执行以下步骤。

运行以下命令安装 Bootstrap:

Install-Package Twitter.Bootstrap.MVC

这会下载所有 Bootstrap 文件并包含以下预定义的 Bootstrap 包配置:

public class BootstrapBundleConfig
{
    public static void RegisterBundles()
    {
        // Add @Styles.Render("~/Content/bootstrap") in the <head/> of your _Layout.cshtml view
        // For Bootstrap theme add @Styles.Render("~/Content/bootstrap-theme") in the <head/> of your _Layout.cshtml view
        // Add @Scripts.Render("~/bundles/bootstrap") after jQuery in your _Layout.cshtml view
        // When <compilation debug="true" />, MVC4 will render the full readable version. When set to <compilation debug="false" />, the minified version will be rendered automatically
        BundleTable.Bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
        BundleTable.Bundles.Add(new StyleBundle("~/Content/bootstrap").Include("~/Content/bootstrap.css"));
        BundleTable.Bundles.Add(new StyleBundle("~/Content/bootstrap-theme").Include("~/Content/bootstrap-theme.css"));
    }
}

上面还包括描述如何渲染包的注释。

我认为最初的 404 字体错误是由于字体文件夹与缩小的 css 中指定的级别不同。

如果您希望保留当前的解决方案，我可以修复 404 的唯一方法是将字体文件夹复制到 Web 应用程序的根目录，并为您的字体保留默认的 Bootstrap css。

要在本地测试它，只需从您的网络配置中删除 debug="true"。