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")

まだ localhost アイコンは正常に表示されますが、コードをリリース サーバーにプッシュすると、アイコンではなく四角形しか表示されず、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

これが私がそれを解決した方法です - 私は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

次に、バンドル構成の仮想パスに別のレベルを追加しました

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

以前、私が使用していた~/Content/css

そして、ビューで...

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

これは機能しましたが、まだフォントの 1 つで 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 Webサーバーを使用して、同じ問題が発生しました。

解決策は、Web サーバー上の MIME タイプが application/octet-stream のファイル名拡張子のリストに .woff を追加することでした。

web.config でも同じことができます。

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

でIgnoreRoute、「Content」フォルダを指定しました。フォント用にも追加してみてください。」

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