Azure上的Bootstrap Glyphicons具有不同的字体样式

Question

我已经使用从Nuget安装的ASP.NET MVC 5、Bootstrap 3.3.6和Glyphicons创建了Web应用程序。我对导航链接的字体样式有问题，只有那些添加了Glyphicons的链接。Azure上出现问题。为了清楚起见，将显示Glyphicons。在azure上，它们更大，而且以下名称使用不同的字体，这是不正确的。有什么想法吗。。？

我在localhost上的样式设置也有同样的问题，但我使用以下代码修复了它。在｛｝部分之前添加了.gyphicicon:，并从"Glyphicicons Hallings"更改为.Gyphicicon｛font-family:inherit；｝

引导.css

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
  url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
  url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
  url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
  url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position:  relative;
  top: 0px;
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  font-style:  normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon:before{
  font-family: 'Glyphicons Halflings' !important;
  font-size: x-small;
}

我不知道为什么它在Azure上不起作用。

我的其余代码：

_布局.cshtml

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/jqueryui")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jqueryui")
<div class="navbar-header">
    <a class="navbar-brand" style="padding-top:14px;font-family:Arial, Helvetica, sans-serif" href="/Home/Index">
        <span class="glyphicon glyphicon-home" style="font-size:14px"> Home Page</span></a>
</div>
<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li>@Html.ActionLink(" Offers", "All", "Offers", null, new { @class = "glyphicon glyphicon-road " })</li>
        <li>@Html.ActionLink("About", "About", "Home")</li>
        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>                   
    </ul>
</div>

BundleConfig.cs

    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));
        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-{version}.js"));
        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));
        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));
        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                  "~/Scripts/jquery-ui-{version}.js"));
        bundles.Add(new StyleBundle("~/Content/jqueryui").Include(
                  "~/Content/themes/base/all.css",
                  "~/Content/themes/base/base.css",
                  "~/Content/themes/base/theme.css"));
    }

Web.config

</system.webServer>
  <staticContent>
    <remove fileExtension=".eot" />
    <remove fileExtension=".ttf" />
    <remove fileExtension=".svg" />
    <remove fileExtension=".woff" />
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    <mimeMap fileExtension="woff" mimeType="application/font-woff" />
    <mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
  </staticContent>
</system.webServer>

这就是在IE中检查时"Offers"导航链接的样子：

1.在Azure 上

2.在本地主机上

Glyphicons位于主文件夹/fonts/Glyphicons hallings regular中。（eot、svg、ttf、woff、woff2）

所有bootstrap css都位于主文件夹/Content/bootstrap*中。（css，map）

Answer 1

您的问题是绑定。

在调试模式下本地运行时，.css文件会单独发送到浏览器。当不处于调试模式时（部署时），.min.css文件被捆绑在一个文件中并发送。如果没有.min.css文件，它会被动态缩小。

换句话说，您的更改不在bootstrap.min.css中，因此您的更改不会出现在部署的应用程序中。最小化bootstrap.css（有很多在线工具）并替换bootstrap.min.css的内容。或者最好不要使用引导文件（因此将bootsrap升级到新版本并不困难），并在捆绑包中最后加载的单独css文件中覆盖所需的任何内容。