Twitter引导程序字形不会出现在发布模式404中

Question

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

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

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( "〜/捆绑/ maincss")

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

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

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

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

谢谢.

Answer 1

这是我如何解决它 - 我正在使用MVC5和Bootstrap 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

然后我在bundle config中添加了另一个级别到我的虚拟路径

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>

Answer 2

将字体文件夹复制到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与问题中的不同.

Answer 3

我使用IIS 7.5 webserver遇到了同样的问题.

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

您也可以在web.config中实现相同的功能:

<staticContent>
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
</staticContent>

Answer 4

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

而不是从引导站点手动下载文件并配置捆绑我使用nuget包为我做这件事.

如果您愿意,请执行以下步骤.

运行以下命令安装Bootstrap:

Install-Package Twitter.Bootstrap.MVC

这将下载所有的bootrap文件,并包含以下预定义的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应用程序的根目录.

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