Pliki czcionek nie ładują się za pomocą pakietów ASP.NET

Question

W mojej aplikacji ASP.NET MVC używam pakietów do kompresowania plików css i js. Problem polega na tym, że czcionki nie ładują się po włączeniu trybu optymalizacji.

BundleTable.EnableOptimizations = true; 

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

I tu jest css dla czcionek.

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

Oto, w jaki sposób na stronie znajduje się odnośnik CSS.

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

Jednak, kiedy sprawdzane narzędzie Chrome Debugger, pliki czcionek są nie do wczytywania strony i moja strona wygląda źle z niewłaściwych czcionek.

Co robię źle?

Answer 1

Myślę, że problem dotyczy lokalizacji czcionki. Zakładam, że pakiet wirtualnej lokalizacji css /BundleStyles/css faktycznie nie istnieje. i jeśli struktura folderów jak poniżej

Treści> Czcionka

Content> styl

Jeśli to prawda, to spróbuj tego

zmianę /BundleStyles/css do /Content/css

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

i odsyłaj ence czcionkę jak ten

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

w tym przypadku czcionka zostanie załadowany w stosunku do „css” pliku, który znajduje się w folderze zawartości, która zawiera również „czcionki” folder

Jeśli to, co zakłada jest niepoprawny, pokaż nam, jak uporządkowałeś swoje pliki.

Answer 2

Świetna odpowiedź powyżej.

Alternatywa - jeśli z jakiegoś powodu powyższe nie działało dla Ciebie - zmieniłaby sposób, w jaki właściwość src @ font-face odwołuje się do folderu "Czcionki". "../" -ing nie działa zbyt dobrze do pakowania, więc odwołuje się bezpośrednio z folderu głównego witryny. Assumung folderze Fonts „” jest jednym z korzenia w dół, to zmienić:

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

do tego:

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

Będziesz pobierać takie same wyniki, gdy strona jest prowadzony w trybie debugowania też.

Answer 3

Poszukałem w Internecie tego dzisiaj, ponieważ pojawia się ten problem.Oto co pracował dla mnie:

1. Przełącznik/pakiet/nie był rzeczywiście problem (próbowałem ten pierwszy)
2. Zmieniłem apostrofów aby cudzysłowach & czcionki pracowali - ale nie mam pojęcia dlaczego, więc jeśli ktoś wie, proszę, rozwiąż zagadkę.

Answer 4

myślę CssRewriteUrlTransform może być droga:

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

Używane tak:

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

pracował dla mnie.