web-dev-qa-db-ja.com

フォントファイルがASP.NETバンドルで読み込まれない

ASP.NET MVCアプリケーションでは、バンドルを使用してcssファイルとjsファイルを圧縮しています。問題は-最適化モードを有効にした後、フォントが読み込まれないことです。

BundleTable.EnableOptimizations = true;

これがC＃コードです

public static void RegisterBundles(BundleCollection bundles) {
    RegisterStyles(bundles);
    BundleTable.EnableOptimizations = true;
}

private static void RegisterStyles(BundleCollection bundles) {
bundles.Add(new StyleBundle("~/BundleStyles/css").Include(
    "~/Content/Styles/bootstrap/bootstrap.css",
    "~/Content/Styles/reset.css",
    "~/Content/Styles/gridpack/gridpack.css",

    "~/Content/Styles/fontFaces.css",
    "~/Content/Styles/icons.css",

    "~/Content/Styles/inputs.css",
    "~/Content/Styles/common.css",
    "~/Content/Styles/header.css",
    "~/Content/Styles/footer.css",
    "~/Content/Styles/cslider/slider-animations.css",
    "~/Content/Styles/cslider/slider-base.css"));
}

そして、これがフォントのcssです。

   @font-face {
      font-family: ProximaNova;
      src: url('../Fonts/ProximaNova/ProximaNova-Bold.otf') format('opentype');
      font-weight: bold;
      font-style: normal;
    }

ページでCSSが参照されている方法を次に示します。

<link href="/BundleStyles/css?v=pANk2exqBfQj5bGLJtVBW3Nf2cXFdq5J3hj5dsVW3u01" rel="stylesheet"/>

ただし、Chromeデバッガツールでチェックすると、フォントファイルがページにロードされず、ページが間違ったフォントで見た目が悪くなります。

何が間違っていますか？

c#asp.netasp.net-mvcbundlefont-face
47
Zafar

さて、問題はフォントの場所にあると思います。バンドルされたcss仮想ロケーション/BundleStyles/cssは実際には存在しません。そして、あなたのフォルダ構造が以下のような場合

コンテンツ>フォント

コンテンツ>スタイル

これが当てはまる場合は、これを試してください

変化する /BundleStyles/cssから/Content/css

<link href="/Content/css?v=pANk2exqBfQj5bGLJtVBW3Nf2cXFdq5J3hj5dsVW3u01" rel="stylesheet"/>

このようにフォントを参照します

src: url('Fonts/ProximaNova/ProximaNova-Bold.otf')

この場合、フォントは、「fonts」フォルダーも含むコンテンツフォルダー内にある「css」ファイルに関連してロードされます。

私が仮定したことが間違っている場合、ファイルをどのように構造化したかを教えてください

39
Mahmoud Ibrahim

私はCssRewriteUrlTransformが行く方法かもしれないと思う：

https://msdn.Microsoft.com/en-us/library/system.web.optimization.cssrewriteurltransform（v = vs.110）.aspx

次のように使用します：

.Include("~/Content/bootstrap-cosmo.min.css", new CssRewriteUrlTransform())

私のために働いた。

29
Snuffler_71

上記の素晴らしい答え。

代替手段-何らかの理由で上記が機能しない場合-@ font-face srcプロパティが 'Fonts'フォルダーを参照する方法を変更することです。 '../'-ingはバンドリングではうまく機能しないため、代わりにサイトのルートフォルダーから直接参照します。 'Fonts'フォルダがルートから1つ下にあると仮定して、これを変更します。

@font-face {
  src: url('../Fonts/ProximaNova/ProximaNova-Bold.otf') format('opentype');
}

これに：

@font-face {
  src: url('/Fonts/ProximaNova/ProximaNova-Bold.otf') format('opentype');
}

サイトがデバッグモードでも実行されている場合、同じ結果を取得します。

7
Matt

私はこの問題に直面しているので、これを今日オンラインで探しました。ここに私のために働いたものがあります：

  1. / bundle /は実際には問題ではありませんでした（最初にこれを試しました）
  2. 私は一重引用符を二重引用符に変更しましたが、フォントは機能しましたが、理由はわかりません。
1
Melanie Sumner