1

我想在我的代码中捆绑三个 css 文件。其中之一是用于我的网络字体，我使用“url”作为它。但是当我运行应用程序浏览器时找不到文件。

这是我的 css 文件：

@font-face {
    font-family: 'neuropol';
    src: url('../Files/Font/neuropol_x_free-webfont.eot');
    src: url('../Files/Font/neuropol_x_free-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Files/Font/neuropol_x_free-webfont.woff') format('woff'),
         url('../Files/Font/neuropol_x_free-webfont.ttf') format('truetype'),
         url('../Files/Font/neuropol_x_free-webfont.svg#neuropol_x_freeregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

这是我的捆绑代码：

bundles.Add(new StyleBundle("~/bundles/styles/base").Include("~/Content/Styles/style.css", "~/Content/Styles/normalize.css", "~/Content/Styles/webfont.css"));

有人可以帮我解决问题吗？

4

3 回答 3

5

当 CSS 定义中有 src URL 时，浏览器将检查相对于它下载 CSS 文件的位置的路径。在这种情况下，这意味着它正在寻找 src 文件 ~/bundles/Files/Font/...而不是~/Content/Files/Font/....

尝试使您的捆绑包名称与相对位置匹配。

bundles.Add(new StyleBundle("~/Content/Styles/base-bundle.css").Include("~/Content/Styles/style.css", "~/Content/Styles/normalize.css", "~/Content/Styles/webfont.css"));
于 2013-02-25T16:32:09.303 回答
2

看看这个链接

基本上，您可以添加一个转换，将您的 css 文件中的 url 转换为有效的 url。

您可以通过将 Bundles 配置更改为此：

bundles.Add(
new StyleBundle("~/Content/Styles/base-bundle.css")
.Include("~/Content/Styles/style.css", new CssRewriteUrlTransform())
.Include("~/Content/Styles/normalize.css", new CssRewriteUrlTransform())
.Include("~/Content/Styles/webfont.css", new CssRewriteUrlTransform())
);
于 2015-05-20T14:36:20.117 回答
0

您可以像这样将其更改为 App_Start>BundleConfig.cs

     bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                            "~/Content/themes/base/jquery.ui.core.css",
                            "~/Content/themes/base/jquery.ui.resizable.css",
                            "~/Content/themes/base/jquery.ui.selectable.css",
                            "~/Content/themes/base/jquery.ui.accordion.css",
                            "~/Content/themes/base/jquery.ui.autocomplete.css",
                            "~/Content/themes/base/jquery.ui.button.css",
                            "~/Content/themes/base/jquery.ui.dialog.css",
                            "~/Content/themes/base/jquery.ui.slider.css",
                            "~/Content/themes/base/jquery.ui.tabs.css",
                            "~/Content/themes/base/jquery.ui.datepicker.css",
                            "~/Content/themes/base/jquery.ui.progressbar.css",
                            "~/Content/themes/base/jquery.ui.theme.css"));

并将其加载到您的布局页面中，就像在 head 部分中一样。

@Styles.Render("~/Content/themes/base/css")
于 2013-02-26T13:12:29.463 回答