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

В моем приложении 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", файлы шрифтов не загружаются на страницу, а моя страница выглядит плохо с неправильными шрифтами.

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

Ответ 1

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

Контент > Шрифт

Контент > стиль

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

измените /BundleStyles/css на /Content/css

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

и укажите свой шрифт следующим образом

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

в этом случае ваш шрифт будет загружен относительно файла "css", который находится внутри папки содержимого, которая также содержит папку "fonts"

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

Ответ 2

Я думаю, что CssRewriteUrlTransform может быть следующим:

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

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

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

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

Ответ 3

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

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

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

Для этого:

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

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

Ответ 4

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

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