Tệp phông chữ không tải với Gói ASP.NET

Question

Trong ứng dụng ASP.NET MVC của tôi, tôi đang sử dụng Gói để nén tệp css và js. Vấn đề là - các phông chữ không tải sau khi tôi kích hoạt chế độ tối ưu hóa.

BundleTable.EnableOptimizations = true; 

Dưới đây là mã 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")); 
} 

Và đây là css cho phông chữ.

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

Đây là cách CSS được tham chiếu trong trang.

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

Tuy nhiên, khi tôi kiểm tra bằng công cụ Trình gỡ lỗi Chrome, các tệp phông chữ không tải lên trang và trang của tôi có vẻ xấu với phông chữ sai.

Tôi đang làm gì sai?

Answer 1

Vâng, tôi nghĩ rằng vấn đề là với vị trí phông chữ của bạn. Tôi giả định rằng vị trí ảo css đi kèm /BundleStyles/css không thực sự tồn tại. và nếu cấu trúc của bạn thư mục như dưới đây

nội dung> Font

nội dung> phong cách

Nếu điều này là đúng, sau đó thử

thay đổi này /BundleStyles/css để /Content/css

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

và tham khảo ence phông chữ của bạn như thế này

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

trong trường hợp này phông chữ của bạn sẽ được nạp tương đối so với tập tin "css" mà nằm bên trong thư mục nội dung mà còn chứa các "phông chữ" thư mục

Nếu những gì tôi giả định không chính xác, vui lòng chỉ cho chúng tôi cách bạn cấu trúc tệp của mình

Answer 2

Câu trả lời hay ở trên.

Một giải pháp thay thế - nếu vì một lý do nào đó ở trên không hiệu quả với bạn - sẽ thay đổi cách tài sản src phông chữ tham chiếu đến thư mục 'Phông chữ'. '../' -ing không hoạt động tốt cho việc nhóm để tham khảo trực tiếp từ thư mục gốc của trang web thay thế. Assumung thư mục 'Phông chữ' là một xuống từ gốc, thay đổi này:

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

Để này:

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

Bạn sẽ lấy kết quả tương tự khi trang web được chạy trong chế độ gỡ lỗi quá.

Answer 3

Tôi đã tìm kiếm trực tuyến hôm nay vì tôi đang gặp sự cố này.Đây là những gì làm việc cho tôi:

1. Các/bó/không thực sự là một vấn đề (Tôi đã thử này đầu tiên)
2. tôi đã thay đổi dấu nháy đơn để dấu ngoặc kép & các phông chữ làm việc - nhưng không biết tại sao, vì vậy nếu ai đó biết xin vui lòng xây dựng.

Answer 4

Tôi nghĩ CssRewriteUrlTransform có thể là cách để đi:

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

Được sử dụng như sau:

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

Làm việc cho tôi.