web-dev-qa-db-fra.com

Les fichiers de police ne se chargent pas avec les bundles ASP.NET

Dans mon application ASP.NET MVC, j'utilise Bundles pour compresser les fichiers css et js. Le problème est que les polices ne se chargent pas après l’activation du mode d’optimisation. 

BundleTable.EnableOptimizations = true;

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

Et voici le css pour les polices.

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

Voici comment CSS est référencé dans la page.

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

Cependant, lorsque j'ai vérifié avec l'outil Chrome Debugger, les fichiers de police ne se chargent pas dans la page et ma page a l'air mal avec de mauvaises polices.

Qu'est-ce que je fais mal?

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

Eh bien, je pense que le problème réside dans l'emplacement de votre police. Je suppose que l'emplacement virtuel css intégré /BundleStyles/css n'existe pas réellement. et si la structure de vos dossiers est comme ci-dessous

Contenu> Police

Contenu> style

Si cela est vrai, alors essayez ceci

remplacez /BundleStyles/css par /Content/css

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

et référencez votre police comme ça 

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

dans ce cas, votre police sera chargée par rapport au fichier "css" qui se trouve dans le dossier de contenu qui contient également le dossier "polices"

Si ce que j'ai supposé est incorrect, veuillez nous montrer comment vous avez structuré vos fichiers.

39
Mahmoud Ibrahim

Je pense que CssRewriteUrlTransform pourrait être le chemin à parcourir: 

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

Utilisé comme tel:

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

Travaillé pour moi.

24
Snuffler_71

Grande réponse ci-dessus.

Une alternative - si pour une raison quelconque, l’opération ci-dessus ne fonctionnait pas pour vous - serait de changer la manière dont la propriété @ font-face src fait référence au dossier 'Fonts'. '../' - ing ne fonctionne pas très bien pour un regroupement; faites donc directement référence à partir du dossier racine du site. En supposant que le dossier 'Fonts' se situe à la racine, changez ceci:

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

Pour ça:

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

Vous obtiendrez les mêmes résultats lorsque le site sera également exécuté en mode débogage.

7
Matt

Je suis allé chercher cela en ligne aujourd'hui parce que je suis confronté à ce problème. Voici ce qui a fonctionné pour moi:

  1. Le/bundle/n'était pas vraiment un problème (j'ai d'abord essayé ceci)
  2. J'ai remplacé les guillemets simples par des guillemets doubles et les polices ont fonctionné - mais je ne sais pas pourquoi, donc si quelqu'un le sait, n'hésitez pas à élaborer.
1
Melanie Sumner