html - .woff 和 .tff 的链接在缩小后不起作用

Question

我使用样式包捆绑我所有的 CSS，并使用样式渲染。

bundles.Add(new StyleBundle("~/content/assets")
                    .Include(
                             "~/assets/plugins/bootstrap/css/bootstrap.min.css",
                            "~/assets/css/one.style.css",
                             "~/assets/css/footers/footer-v7.css"
                     ));
            bundles.Add(new StyleBundle("~/content/plugin")
                                        .Include("~/assets/plugins/animate.css",
                                                    "~/assets/plugins/line-icons/line-icons.css",
                                                    "~/assets/plugins/pace/pace-flash.css",
                                                    "~/assets/plugins/owl-carousel/owl.carousel.css",
                                                    "~/assets/plugins/cube-portfolio/cubeportfolio/css/cubeportfolio.min.css",
                                                    "~/assets/plugins/cube-portfolio/cubeportfolio/custom/custom-cubeportfolio.css",
                                                    "~/assets/plugins/login-signup-modal-window/css/style.css",
                                                    "~/assets/css/plugins/style-switcher.css",
                                                    //Not plugins , but included for page load sequence
                                                    "~/assets/css/theme-skins/one.dark.css",
                                                    "~/assets/css/custom.css"
                                                    ).Include("~/assets/plugins/font-awesome/css/font-awesome.min.css", new CssRewriteUrlTransform()));


 @Styles.Render("~/content/assets")
 @Styles.Render("~/Content/plugin")

这在开发上运行良好，但当我部署我的应用程序时，它会丢失指向少数资源的链接。

例如，指向 Simple-Line-Icons.woff 和 ttf 的 fowlloing 链接不起作用，因为它正在内容虚拟文件夹中查看，字体在其他地方。

@font-face {
    font-family: 'Simple-Line-Icons';
    src:url('fonts/Simple-Line-Icons.eot');
    src:url('fonts/Simple-Line-Icons.eot?#iefix') format('embedded-opentype'),
        url('fonts/Simple-Line-Icons.woff') format('woff'),
        url('fonts/Simple-Line-Icons.ttf') format('truetype'),
        url('fonts/Simple-Line-Icons.svg#Simple-Line-Icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

我可以使用 Css 中资源的绝对链接，但我在想是否有更好的方法...

Answer 1

我们有类似的问题。

我们使用 gulp，因此有一个 src 目录和一个 dist 目录。

虽然在 src 中字体在两种情况下都位于 src --> fonts 或 dist --> fonts 中，但使用 less/css 是不同的:

src-->less-->app--> style.less 和dist-->css-->style.min.css

我们现在用更少的代码编写我们的样式，这样它就会产生有效的 CSS。令人困惑的部分是，less 文件有错误，并且由于层次结构不同而无法找到字体文件。但是一旦你明白了原因，这对我们来说就很好用了。也许你可以用同样的方式处理它，否则我认为绝对路径是可行的方法。