글꼴 파일이 ASP로 로드되지 않습니다.NET 번들

글꼴 파일이 ASP로 로드되지 않습니다.NET 번들

내 ASP에서.NET MVC 애플리케이션, 나는 번들을 사용하여 css와 js 파일을 압축하고 있습니다.문제는 최적화 모드를 활성화한 후 글꼴이 로드되지 않는다는 것입니다.

BundleTable.EnableOptimizations = true;

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

그리고 여기 글꼴에 대한 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 도구로 확인해보니, 글꼴 파일이 페이지에 로드되지 않고 잘못된 글꼴로 인해 페이지가 불량해 보입니다.

내가 뭘 잘못하고 있는 거지?

음, 저는 당신의 글꼴 위치에 문제가 있다고 생각합니다.CSS 가상 위치 번들이/BundleStyles/css실제로 존재하지 않습니다. 그리고 만약 당신의 폴더가 아래와 같은 구조라면.

내용 > 글꼴

내용 > 스타일

만약 이것이 사실이라면, 이것을 시도해 보세요.

바꾸다/BundleStyles/css로./Content/css

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

그리고 당신의 글꼴을 이렇게 참조합니다.

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

이 경우 글꼴은 내용 폴더 안에 있는 "filename" 파일에 상대적으로 로드됩니다. 내용 폴더 안에는 "filename" 폴더도 포함되어 있습니다.

제가 가정한 것이 틀리면 파일을 어떻게 구성했는지 보여주십시오.

CssRewriteUrlTransform이 방법일 수 있다고 생각합니다.

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

다음과 같이 사용:

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

나를 위해 일했습니다.

위의 답변은 훌륭합니다.

어떤 이유로 인해 위에서 언급한 내용이 효과가 없다면 @font-face src 속성이 'Fonts' 폴더를 참조하는 방법을 변경하는 것이 좋습니다. '../-'ing은 번들링에 매우 적합하지 않으므로 대신 사이트 루트 폴더에서 직접 참조합니다.'Fonts' 폴더가 루트에서 하나 아래에 있다고 가정하면 다음과 같이 변경합니다.

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

대상:

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

사이트가 디버그 모드로 실행될 때도 동일한 결과를 검색할 수 있습니다.

저는 오늘 이 문제에 부딪혀 온라인에서 이것을 찾았습니다.제가 성공한 것은 다음과 같습니다.

1. /bundle/은 실제로 문제가 되지 않았습니다(먼저 시도했습니다).
2. 저는 작은 따옴표를 큰 따옴표로 바꿨고 글꼴은 작동했습니다. 하지만 이유를 알 수 없습니다. 누군가 알고 있다면 언제든지 자세히 설명해 주십시오.

이 문제의 해결책을 찾는 데 시간이 걸렸습니다.이 게시물을 찾을 때까지 아무 것도 작동하지 않았습니다: https://mitchelsellers.com/blog/article/avoiding-unexpected-bundling-issues-with-asp-net-mvc

요약하자면, 번들을 참조하는 경로가 웹 앱 파일 폴더 구조와 겹치지 않도록 해야 합니다.제 경우 CSS 번들은 ~/Content/css 폴더에 있는 파일과 같은 경로를 가지고 있습니다.번들 참조의 이름을 "~/css"(이 이름의 파일 폴더 없음)로 변경하여 오류가 사라졌습니다.

언급URL : https://stackoverflow.com/questions/19000083/font-files-are-not-loading-with-asp-net-bundles