Font-Dateien laden nicht mit ASP.NET-Bundles

Question

In meiner ASP.NET MVC-Anwendung verwende ich Bundles, um CSS- und JS-Dateien zu komprimieren. Das Problem ist - die Schriften werden nicht geladen, nachdem ich den Optimierungsmodus aktiviert habe.

BundleTable.EnableOptimizations = true; 

Dies ist die C# -Code

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

Und hier ist die CSS für Schriftarten.

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

So wird CSS auf der Seite referenziert.

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

Allerdings, wenn ich mit Chrome Debugger-Tool überprüft, die Schriftart-Dateien laden nicht auf der Seite und meine Seite sieht schlecht aus mit falschen Schriftart.

Was mache ich falsch?

Answer 1

Nun, ich denke, das Problem ist mit Ihrer Schriftstelle. Ich nehme an, dass der gebündelte css virtual location /BundleStyles/css nicht wirklich existiert. und wenn Sie Ihre Ordner-Struktur wie unten

Inhalt> Font

Content> Stil

Wenn dies wahr ist, dann versuchen, diese

Änderung /BundleStyles/css zu /Content/css

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

und beziehen ENCE Ihre Schrift wie diese

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

in diesem Fall wird Ihre Schrift in Bezug auf die „css“ Datei geladen werden, die innerhalb des Content-Ordner befindet, die auch die „Fonts“ enthält Ordner

Wenn das, was ich davon ausgegangen, ist falsch Bitte zeigen Sie uns, wie Sie Ihre Dateien strukturiert

Answer 2

Große Antwort oben.

Eine Alternative - wenn aus irgendeinem Grund das oben für Sie nicht funktionierte - wäre zu ändern, wie die Eigenschaft @ font-face src auf den Ordner "Fonts" verweist. '../' -ing funktioniert nicht sehr gut für Bündelung, so verweisen Sie stattdessen direkt aus dem Site-Stammordner.

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

Um dies: Assumung den Ordner ‚Fonts‘ ein nach unten von der Wurzel ist, dies ändern

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

Sie werden die gleichen Ergebnisse abzurufen, wenn die Site auch im Debug-Modus lief ist.

Answer 3

Ich habe heute online nach diesem gesucht, weil ich auf dieses Problem stoße.Hier ist, was für mich gearbeitet:

1. Der/Bündel/war nicht wirklich ein Problem (Ich habe versucht, diese erste)
2. Ich änderte einfache Anführungszeichen doppelte Anführungszeichen & die Schriften gearbeitet - aber keine Ahnung, warum, also wenn jemand weiß, bitte fühlen Sie sich frei zu erarbeiten.

Answer 4

denke ich CssRewriteUrlTransform der Weg zu gehen sein könnten:

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

für mich gearbeitet:

https://msdn.microsoft.com/en-us/library/system.web.optimization.cssrewriteurltransform(v=vs.110).aspx

wie so verwendet.