I file dei font non vengono caricati con i bundle ASP.NET

Question

Nella mia applicazione ASP.NET MVC, sto utilizzando Bundles per comprimere i file css e js. Il problema è che i caratteri non vengono caricati dopo aver attivato la modalità di ottimizzazione.

BundleTable.EnableOptimizations = true; 

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

Ed ecco il css per i font.

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

Ecco come si fa riferimento ai CSS nella pagina.

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

Tuttavia, quando ho controllato con Chrome strumento Debugger, i file di font non sono di caricamento per la pagina e la mia pagina sembra male con i caratteri sbagliati.

Cosa sto sbagliando?

Answer 1

Bene, penso che il problema sia con la posizione del carattere. Presumo che la posizione virtuale css in bundle /BundleStyles/css in realtà non esiste. e se la struttura delle cartelle, come di seguito

Contenuti> Font

Contenuti> stile

Se questo è vero, allora provate questo

cambiamento /BundleStyles/css al /Content/css

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

e fare riferimento ENCE il tipo di carattere come questo

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

in questo caso il tipo di carattere verrà caricato relativo al file "css" che si trova all'interno della cartella del contenuto che contiene anche i "caratteri" cartella

Se quello che ho assunto non è corretto per favore mostraci come hai strutturato i tuoi file

Answer 2

Ottima risposta sopra.

Un'alternativa - se per qualche motivo non ha funzionato per voi - sarebbe cambiare il modo in cui la proprietà src di @ font-face fa riferimento alla cartella "Fonts". '../' -ing non funziona molto bene per il raggruppamento in modo da fare riferimento direttamente dalla cartella principale del sito. Assumung cartella 'font' è uno giù dalla radice, cambiare questo:

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

A tal:

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

potrete recuperare gli stessi risultati quando il sito è gestito in modalità debug troppo.

Answer 3

Oggi sono andato online per questo perché mi sto imbattendo in questo problema.Ecco cosa ha funzionato per me:

1. Il/bundle/non era in realtà un problema (ho provato questa prima)
2. ho cambiato apici per le virgolette doppie & i caratteri hanno lavorato - ma nessuna idea perché, quindi, se qualcuno sa per favore sentiti libero di elaborare.

Answer 4

Penso CssRewriteUrlTransform potrebbe essere la strada da percorrere:

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

usati in questo modo:

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

lavorato per me.