c# - mvc - Los archivos de fuentes no se cargan con paquetes de ASP.NET

bundling and minification in mvc 5 example

Question

En mi aplicación ASP.NET MVC, estoy usando paquetes para comprimir archivos css y js. El problema es que las fuentes no se cargan después de habilitar el modo de optimización.

BundleTable.EnableOptimizations = true;

Aquí está el código 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"));
}

Y aquí está el css para las fuentes.

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

Aquí es cómo se hace referencia a CSS en la página.

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

Sin embargo, cuando verifiqué con la herramienta Chrome Debugger, los archivos de fuentes no se cargan en la página y mi página se ve mal con las fuentes incorrectas.

¿Qué estoy haciendo mal?

Answer 1

Bueno, creo que el problema está en la ubicación de la fuente. Supongo que la ubicación virtual css /BundleStyles/css no existe realmente. y si tus carpetas se estructuran como abajo

Contenido> Fuente

Contenido> estilo

Si esto es cierto, intente esto

cambiar /BundleStyles/css a /Content/css

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

y referencia tu fuente como esta

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

en este caso, su fuente se cargará en relación con el archivo "css" que se encuentra dentro de la carpeta de contenido que también contiene la carpeta de "fuentes"

Si lo que asumí es incorrecto, muéstrenos cómo estructuró sus archivos

Answer 2

Creo que CssRewriteUrlTransform podría ser el camino a seguir:

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

Utilizado como tal:

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

Trabajó para mi.

Answer 3

Fui a buscar esto en línea hoy porque me estoy encontrando con este problema. Esto es lo que funcionó para mí:

1. El / paquete / no era realmente un problema (intenté esto primero)
2. Cambié las comillas simples a comillas dobles y las fuentes funcionaron, pero no tengo idea de por qué, así que si alguien sabe, siéntase libre de elaborar.

Answer 4

Gran respuesta por encima.

Una alternativa, si por alguna razón lo anterior no te funcionara, sería cambiar la forma en que la propiedad @ font-face src hace referencia a la carpeta ''Fuentes''. ''../'' -ing no funciona muy bien para agrupar, por lo tanto, haga referencia directamente desde la carpeta raíz del sitio. Suponiendo que la carpeta ''Fuentes'' esté una abajo de la raíz, cambie esto:

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

A esto:

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

Recuperará los mismos resultados cuando el sitio se ejecute también en modo de depuración.