Файлы шрифтов не загружаются в пакеты ASP.NET

Question

В моем приложении ASP.NET MVC я использую Bundles для сжатия css и js-файлов. Проблема в том, что после включения режима оптимизации шрифты не загружаются.

BundleTable.EnableOptimizations = true; 

Здесь С код

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

А вот CSS для шрифтов #.

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

Вот как CSS ссылается на страницу.

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

Однако, когда я проверил с Chrome Debugger инструмент, файлы шрифтов не загружаются на страницу, и моя страница выглядит плохо с неверными шрифтами.

Что я делаю неправильно?

Answer 1

Ну, я думаю, проблема связана с вашим расположением шрифтов. Я предполагаю, что связанное виртуальное местоположение css /BundleStyles/css фактически не существует. и если ваша структура папок, как показано ниже

Материалы> Шрифт

Содержимое> стиль

Если это так, то попробуйте этот

изменения /BundleStyles/css к /Content/css

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

и обратитесь к ENCE шрифт как этот

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

в этом случае ваш шрифт будет загружен по отношению к файлу «CSS», которая расположена в папке содержимого, который содержит также «шрифты» папку

Если то, что я предположил, неверно, пожалуйста, покажите нам, как вы структурировали свои файлы.

Answer 2

Отличный ответ выше.

Альтернатива - если по какой-то причине вышеизложенное не сработало для вас - было бы изменение того, как свойство src @ font-face ссылается на папку «Fonts». '../' -ing не работает очень хорошо для привязки этой ссылки непосредственно из корневой папки сайта. Assumung папка «Шрифты» это один вниз от корня, изменить:

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

к этому:

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

Вы будете получать те же результаты, когда сайт побежал в режиме отладки тоже.

Answer 3

Я пошел искать онлайн сегодня, потому что я сталкиваюсь с этой проблемой.Вот что работает для меня:

1. /пучок/был на самом деле не проблема (я попробовал это первый)
2. Я изменил одиночные кавычки в двойные кавычки & шрифты работали - но не знаю, почему, так что если кто-то знает, пожалуйста, не стесняйтесь уточнять.

Answer 4

Я думаю CssRewriteUrlTransform может быть путь:

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

Используется как так:

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

работал для меня.