34

我正在处理 ASP.NET MVC 4 中的一个项目,我执行了以下步骤:

  1. 从http://blog.getbootstrap.com/2013/12/05/bootstrap-3-0-3-released/下载 twitter 引导程序

  2. 将字体文件的构建操作设置为内容(文件位于 ~/Content/font 文件夹中)

    glyphicons-halflings-regular.eot
    glyphicons-halflings-regular.svg
    glyphicons-halflings-regular.ttf
    glyphicons-halflings-regular.woff
    
  3. 添加到 RouteConfig.cs

    routes.IgnoreRoute("{folder}/{*pathInfo}", new { folder = "Content" });

  4. 向 Web.config 添加了以下元素

    <?xml version="1.0" encoding="UTF-8"?>
    <system.webServer>
       <staticContent>
           <remove fileExtension=".eot" />
           <remove fileExtension=".ttf" />
           <remove fileExtension=".otf"/>
           <remove fileExtension=".woff"/>
           <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
           <mimeMap fileExtension=".ttf" mimeType="font/ttf" />
           <mimeMap fileExtension=".otf" mimeType="font/otf" />
          <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
       </staticContent>
    </system.webServer>
    
  5. 在 BundleConfig.cs 中包含以下代码

    bundles.Add(new StyleBundle("~/bundles/maincss")
                        .Include("~/Content/bootstrap/bootstrap.css")
                        .Include("~/Content/bootstrap/bootstrap-theme.css")
                        .Include("~/Content/hbl-full.css"));
    

    还尝试了以下代码

    IItemTransform cssFixer = new CssRewriteUrlTransform();
    
    bundles.Add(new StyleBundle("~/bundles/maincss")
                        .Include("~/Content/bootstrap/bootstrap.css", cssFixer)
                        .Include("~/Content/bootstrap/bootstrap-theme.css", cssFixer)
                        .Include("~/Content/hbl-full.css", cssFixer));
    
  6. 在主 Layout.cshtml 中调用

    @Styles.Render("~/bundles/maincss")

仍然在本地主机中正常显示图标,但是当我推送代码以发布服务器时,我只能看到方形而不是图标,并且在 Chrome 的控制台选项卡中我得到

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.woff 404(未找到)测试:1

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.ttf 404(未找到)测试:1

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.svg 404(未找到)测试:1

谢谢你。

4

7 回答 7

25

这是我解决它的方法——我正在使用MVC5Bootstrap 3.1.1

我在项目中组织了我的文件,如下所示:

/Content/Bootstrap/bootstrap.css
                   bootstrap.min.css
/Content/fonts/glyphicons-halflings-regular.eot
               glyphicons-halflings-regular.svg
               glyphicons-halflings-regular.ttf
               glyphicons-halflings-regular.woff

然后我在捆绑配置中的虚拟路径中添加了另一个级别

bundles.Add(new StyleBundle("~/Content/site/css").Include(
    "~/Content/bootstrap/bootstrap.css",
    "~/Content/styles/site.css"
));

以前我用过~/Content/css

并且在视图中...

@Styles.Render("~/Content/site/css")

这行得通,但我仍然在其中一种字体上得到 404 ......所以我添加了 Giles 的解决方案。

<?xml version="1.0" encoding="UTF-8"?>
<system.webServer>
    <staticContent>
        <remove fileExtension=".eot" />
        <remove fileExtension=".ttf" />
        <remove fileExtension=".otf"/>
        <remove fileExtension=".woff"/>
        <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
        <mimeMap fileExtension=".ttf" mimeType="font/ttf" />
        <mimeMap fileExtension=".otf" mimeType="font/otf" />
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
</system.webServer>
于 2014-06-09T21:54:21.207 回答
23

将字体文件夹复制到 Web 应用程序的根目录,并将 web.config 中的 mime 类型更改为

<?xml version="1.0" encoding="UTF-8"?>
<system.webServer>
  <staticContent>
    <remove fileExtension=".eot" />
    <remove fileExtension=".ttf" />
    <remove fileExtension=".otf"/>
    <remove fileExtension=".woff"/>
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <mimeMap fileExtension=".ttf" mimeType="font/ttf" />
    <mimeMap fileExtension=".otf" mimeType="font/otf" />
    <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  </staticContent>
</system.webServer>

为我解决了这个问题。请注意,.woff mimeType 与问题中的不同。

于 2014-03-28T11:33:41.847 回答
9

我有同样的问题,使用 IIS 7.5 网络服务器。

解决方案是将 .woff 添加到 Web 服务器上具有 MIME 类型 application/octet-stream 的文件扩展名列表中。

你也可以在 web.config 中实现同样的效果:

<staticContent>
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
</staticContent>
于 2014-07-02T12:31:48.507 回答
7

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

我没有从引导站点手动下载文件并配置捆绑,而是使用为我完成的 nuget 包。

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

运行以下命令来安装 Bootstrap:

Install-Package Twitter.Bootstrap.MVC

这将下载所有引导程序文件并包括以下预定义的引导程序包配置:

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 应用程序的根目录。

要在本地测试它,只需debug="true"从您的 Web 配置中删除以保存部署到 AppHarbor。

于 2014-01-21T22:53:35.863 回答
4

我遇到过同样的问题。我真的不知道为什么,但是如果我删除 bootstrap.min.css 文件并在包上设置 CssRewriteUrlTransform 一切正常。我正在使用引导程序 v3.1.1

编辑:经过一番调查,这里定义了解决方案:没有调用 CssRewriteUrlTransform 所以删除 bootstrap.min.css 或引用 bootstrap.min.css 而不是 bootstrap.css 将强制对文件进行捆绑/缩小,因此它会调用CssRewriteUrlTransform。

于 2014-05-23T07:49:32.367 回答
1

我有同样的问题。我通过使用引导程序的 CDN 解决了​​这个问题。

于 2014-01-23T03:07:22.837 回答
0

在 中IgnoreRoute,您指定了“内容”文件夹。尝试为字体添加一个”,因为这是您的要求。

routes.IgnoreRoute("{folder}/{*pathInfo}", new { folder = "fonts" });
于 2014-01-21T22:26:32.777 回答